<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="项目模板维护" data-page-identification="b_m730qrjod4">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_tmbu89crd9 自定义模板_eqthivse55 -->
      <!--          模板下发-->
      <a-modal
        :visible="distributeState.selectVisible"
        :title="distributeState.title"
        centered
        :mask-closable="false"
        :keyboard="false"
        :width="distributeState.step === 0 ? '520px' : '1000px'"
        :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
        @cancel="cancelDistribute"
      >
        <template #footer>
          <a-space>
            <a-button type="primary" ghost @click="cancelDistribute">取消</a-button>

            <a-button type="primary" v-if="distributeState.step == 1" @click="prevStep">上一步</a-button>
            <a-button type="primary" v-if="distributeState.step == 2" @click="backSelect">上一步</a-button>
            <a-button type="primary" @click="nextStep" v-if="distributeState.step == 0" :loading="distributeState.getTaskOrMileLoading">下一步</a-button>
            <!--                        <a-button-->
            <!--                            type="primary"-->
            <!--                            @click="getAreaOrProject"-->
            <!--                            :loading="distributeState.getProjectOrAreaLoading"-->
            <!--                            v-if="distributeState.step == 1"-->
            <!--                            >下一步（选项目或者工厂）</a-button-->
            <!--                        >-->
            <a-button type="primary" @click="submitDistributeState" :loading="distributeState.submitLoading" v-if="distributeState.step == 1">确认</a-button>
          </a-space>
        </template>
        <a-form layout="vertical">
          <a-form-item label="请选择" v-if="distributeState.step == 0">
            <a-radio-group v-model:value="distributeState.typeRadio">
              <a-radio :style="radioStyle" value="任务下发"
                >任务下发：
                <br />
                上线后对被选择的任务做覆盖处理</a-radio
              >
              <a-radio :style="radioStyle" value="里程碑阶段下发"
                >里程碑阶段下发：
                <br />
                上线后对被选择的里程碑做覆盖处理
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
        <template v-if="distributeState.step === 1">
          <div class="distribute-table-box" v-if="distributeState.typeRadio === '里程碑阶段下发'">
            <a-table
              bordered
              row-key="templateStageId"
              :columns="distributeState.mileColumns"
              :data-source="distributeState.mileData"
              :rowSelection="distributeState.mileRowSelection"
              :pagination="false"
              :scroll="{ y: 400 }"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'stageName'">
                  <div
                    :style="{
                                            color: record.delFlag === 1 ? 'red' : ''
                                        }"
                    >{{ record.serialNumber }}、{{ text }}</div
                  >
                </template>
              </template>
            </a-table>
          </div>
          <div class="distribute-table-box" v-if="distributeState.typeRadio === '任务下发'">
            <a-table
              bordered
              row-key="templateTaskId"
              :columns="distributeState.taskColumns"
              :data-source="distributeState.taskData"
              :rowSelection="distributeState.taskRowSelection"
              :pagination="false"
              :scroll="{ y: 400 }"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'taskName'">
                  <div
                    :style="{
                                            color: record.delFlag === 1 ? 'red' : ''
                                        }"
                    >{{ record.serialNumber }}、{{ text }}</div
                  >
                </template>
                <template v-if="column.dataIndex === 'stageName'">
                  <div>{{ record.stageSerialNumber }}、{{ text }}</div>
                </template>
              </template>
            </a-table>
          </div>
          <a-form>
            <a-row style="margin-top: 16px">
              <a-col :span="24"><div class="title-tip">选择具体项目进行覆盖处理</div> </a-col>
              <a-col :span="24">
                <a-form-item label="请选择下发项目">
                  <a-tree-select
                    v-model:value="distributeState.treeSelectIdList"
                    style="width: 100%"
                    :tree-data="distributeState.projectData"
                    tree-checkable
                    allow-clear
                    multiple
                    placeholder="请选择"
                    :field-names="{
                                            children: 'children',
                                            label: 'itemName',
                                            value: 'itemCode'
                                        }"
                    tree-node-filter-prop="label"
                    treeDefaultExpandAll
                /></a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </a-modal>
      <!--          模板下发-->
      <!--            交付维护外层项目阶段-->
      <a-modal
        :visible="jfState.visible"
        :title="jfState.title"
        :mask-closable="false"
        centered
        width="950px"
        @ok="handleSubmitJf"
        :ok-button-props="{ loading: loadingState.outMileLoading }"
        @cancel="handleCancelJf"
        destroy-on-close
      >
        <a-form :model="jfState.dataList" ref="jfFormRef">
          <div v-for="(item, index) in jfState.dataList" :key="uid">
            <a-row :gutter="16">
              <a-col :span="11">
                <a-form-item label="项目阶段名称" :name="[index, 'stageName']" :rules="[{ required: true, message: '请输入项目阶段名称', trigger: 'blur' }]">
                  <a-input v-model:value="jfState.dataList[index].stageName" />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="项目阶段序号" :name="[index, 'serialNumber']" :rules="state.stageRules.serialNumber">
                  <a-input v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" />
                </a-form-item>
              </a-col>
              <a-col :span="2" style="padding: 0">
                <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDeleteJfItem(index, item)">
                  <a-button type="primary" class="inner-btn" size="small">
                    <template #icon>
                      <DeleteOutlined style="color: #3875ff" />
                    </template>
                    删除
                  </a-button>
                </a-popconfirm>
              </a-col>
            </a-row>
          </div>
          <a-col :span="24">
            <a-button type="primary" class="out-btn" @click="handleAddJfItem"
              ><template #icon> <plus-outlined /> </template>新增项目阶段
            </a-button>
          </a-col>
        </a-form>
      </a-modal>
      <!--            交付维护外层项目阶段-->
      <!-- 项目阶段维护 -->
      <a-modal
        v-model:visible="state.projectStageVisible"
        :width="1250"
        :maskClosable="false"
        :centered="true"
        :body-style="{ maxHeight: '700px', overflow: 'auto' }"
        @ok="handleStageManagerOk"
        :ok-button-props="{ loading: state.milepostLoading }"
      >
        <template #title>
          <span v-if="state.templateType === '交付项目'"> 里程碑项目阶段维护--{{ state.taskType }}</span>
          <span v-else> 项目阶段维护</span>
        </template>
        <div class="stage-div">
          <a-form ref="templateRef2" :model="state" :rules="state.stageRules">
            <div class="stage-item" v-for="(item, index) in state.templateStageList" :key="item.uid">
              <a-row :gutter="16">
                <template v-if="state.templateType === '交付项目'">
                  <a-col :span="7">
                    <a-form-item label="里程碑项目阶段名称" :name="['templateStageList', index, 'stageName']" :rules="state.stageRules.stageName">
                      <a-input v-model:value="item.stageName" placeholder="请输入" :maxlength="20" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="7">
                    <a-form-item label="里程碑项目阶段序号" :name="['templateStageList', index, 'serialNumber']" :rules="state.stageRules.serialNumber">
                      <a-input v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="7">
                    <a-form-item label="所属项目阶段" :name="['templateStageList', index, 'milepostStageId']" :rules="state.stageRules.milepostStageId">
                      <a-select v-model:value="item.milepostStageId" @focus="getBelong" :options="jfState.belongList" />
                    </a-form-item>
                  </a-col>
                </template>
                <template v-else>
                  <a-col :span="10">
                    <a-form-item label="项目阶段名称" :name="['templateStageList', index, 'stageName']" :rules="state.stageRules.stageName">
                      <a-input v-model:value="item.stageName" placeholder="请输入" :maxlength="20" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item label="项目阶段序号" :name="['templateStageList', index, 'serialNumber']" :rules="state.stageRules.serialNumber">
                      <a-input v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" />
                    </a-form-item>
                  </a-col>
                </template>
                <a-col :span="2" style="padding: 0">
                  <a-space :size="8">
                    <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDeleteStage(index, item)">
                      <a-button type="primary" class="inner-btn" size="small">
                        <template #icon>
                          <DeleteOutlined style="color: #3875ff" />
                        </template>
                        删除
                      </a-button>
                    </a-popconfirm>
                    <a-button type="link" @click="handleExpend(index, item)">
                      <template #icon>
                        <DoubleLeftOutlined v-if="item.isShow" style="color: #3875ff; rotate: 90deg" />
                        <DoubleRightOutlined v-else style="color: #3875ff; rotate: 90deg" />
                      </template>
                      {{ item.isShow ? '折叠' : '展开' }}
                    </a-button>
                  </a-space>
                </a-col>
                <a-form-item :name="['templateStageList', index, 'templateStageId']">
                  <a-input v-model:value="item.templateStageId" :maxlength="20" disabled type="hidden" />
                </a-form-item>
                <a-row v-show="item.isShow && state.templateType === '交付项目'">
                  <a-col :span="22">
                    <a-form-item label="目标" :name="['templateStageList', index, 'goals']" :rules="state.stageRules.goals">
                      <a-textarea v-model:value="item.goals" placeholder="请输入" :rows="1" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item label="关键路径" :name="['templateStageList', index, 'crutialPath']" :rules="state.stageRules.crutialPath">
                      <a-textarea v-model:value="item.crutialPath" placeholder="请输入" :rows="1" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item label="甲方主要角色" :name="['templateStageList', index, 'firstPartyMainRole']" :rules="state.stageRules.crutialPath">
                      <a-textarea v-model:value="item.firstPartyMainRole" placeholder="请输入" :rows="1" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item label="甲方责任及配合事项" :name="['templateStageList', index, 'firstPartyRespAndCoopMatters']" :rules="state.stageRules.firstPartyRespAndCoopMatters">
                      <a-textarea v-model:value="item.firstPartyRespAndCoopMatters" placeholder="请输入" :rows="1" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item label="阶段权重" :name="['templateStageList', index, 'stageWeight']" :rules="state.stageRules.stageWeight">
                      <a-input-number style="width: 100%" v-model:value="item.stageWeight" placeholder="请输入（支持小数点后一位的整数数字）" />
                    </a-form-item>
                  </a-col>
                  <a-divider
                    style="
                                            margin: 0;
                                            margin-bottom: 15px;
                                            background-color: rgba(56, 117, 255, 0.5);
                                        "
                  />
                  <a-col :span="24">
                    <div class="role-list-div">
                      <div class="role-title-left">阶段角色列表</div>
                      <a-button type="primary" ghost size="small" @click="handleAddStageJdRule(index, '下方')"
                        ><template #icon> <plus-outlined /> </template>新增</a-button
                      >
                    </div>
                  </a-col>
                  <template v-for="(roleItem, roleIndex) in item.projectTemplateStageRoleWeightList" :key="roleIndex">
                    <a-col :span="11">
                      <a-form-item
                        label="阶段角色"
                        :name="[
                                                    'templateStageList',
                                                    index,
                                                    'projectTemplateStageRoleWeightList',
                                                    roleIndex,
                                                    'role'
                                                ]"
                        :rules="state.stageRules.role"
                      >
                        <a-select
                          v-model:value="roleItem.role"
                          placeholder="请选择"
                          @focus="getRolePeople"
                          :options="directorRoleList"
                          show-search
                          :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="11">
                      <a-form-item
                        label="权重(相加=100%)"
                        :name="[
                                                    'templateStageList',
                                                    index,
                                                    'projectTemplateStageRoleWeightList',
                                                    roleIndex,
                                                    'roleWeight'
                                                ]"
                        :rules="state.stageRules.roleWeight"
                      >
                        <a-input-number style="width: 100%" v-model:value="roleItem.roleWeight" placeholder="请输入" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="1" style="padding: 0">
                      <a-space :size="8" style="position: relative; top: 10px; left: 10px">
                        <div class="del" @click="handleDeleteStageJdRule(index, roleIndex)"></div>
                      </a-space>
                    </a-col>
                  </template>
                </a-row>
                <a-col :span="24">
                  <div class="status-form" v-show="item.isShow && state.templateType === '平台项目'">
                    <a-row>
                      <a-col :span="24">
                        <div class="status-form-title"> <div class="status-icon"></div> 状态维护 </div>
                      </a-col>
                      <template v-for="(roleItem, roleIndex) in item.taskStatusList" :key="roleIndex">
                        <a-col :span="10">
                          <a-form-item
                            label="任务状态"
                            :name="[
                                                            'templateStageList',
                                                            index,
                                                            'taskStatusList',
                                                            roleIndex,
                                                            'taskStatus'
                                                        ]"
                            :rules="state.stageRules.taskStatus"
                          >
                            <a-input v-model:value="roleItem.taskStatus" placeholder="请输入" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="13" style="padding: 0">
                          <a-space :size="8" style="position: relative; top: 10px; left: 10px">
                            <div class="del" @click="handleDeleteStageStatus(index, roleIndex)"></div>
                          </a-space>
                        </a-col>
                      </template>
                      <a-col :span="24">
                        <a-button size="small" type="primary" ghost @click="handleAddStageStatus(index)"
                          ><template #icon> <plus-outlined /> </template>新增</a-button
                        >
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
              </a-row>
              <a-divider style="margin: 0; margin-bottom: 15px; background-color: #d9d9d9" />
            </div>
          </a-form>
        </div>

        <a-button type="primary" class="out-btn" @click="handleAddStage"
          ><template #icon> <plus-outlined /> </template>
          {{ state.templateType === '交付项目' ? '新增里程碑项目阶段' : '新增项目阶段' }}
        </a-button>
      </a-modal>
      <!--            切换版本-->
      <a-modal
        :visible="versionState.changeVersionVisible"
        title="切换版本"
        centered
        :mask-closable="false"
        :ok-button-props="{ loading: versionState.changeLoading }"
        destroy-on-close
        :footer="null"
        width="1000px"
        :body-style="{
                    paddingTop: '16px'
                }"
        @cancel="cancelChangeVersion"
      >
        <div class="change-version-tip" v-if="a">
          <div class="version-modal-top-left"> <ExclamationCircleOutlined style="color: #fab221; margin-right: 4px" />切换版本前，请确认修改内容已保存</div>
          <div style="display: flex; align-items: center"
            ><div class="version-icon"></div> 当前版本：<span style="color: #262626; font-weight: 600">{{
                            currentTreeDate.versionCode
            }}</span>
          </div>
        </div>
        <div class="version-table">
          <a-table :bordered="true" :data-source="versionState.changeVersionDataSource" :columns="versionColumns" :pagination="false">
            <template #bodyCell="{ column, record, text }">
              <template v-if="state.tableProps.formatColumnsList.includes(column.dataIndex)">
                <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                  <template #title>
                    <p style="color: #262626; margin: 0" v-for="(item, index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                  </template>
                  <div class="table-text">{{ text }}</div>
                </a-tooltip>
              </template>
              <template v-if="column.dataIndex === 'opration'">
                <a-button style="padding: 0" size="small" type="link" @click="confirmChangeVersion(record)"> 切换</a-button>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <!--            切换版本-->
      <!--            保存版本-->
      <a-modal
        :visible="versionState.submitVersionVisible"
        destroy-on-close
        title="保存版本"
        centered
        :mask-closable="false"
        :ok-button-props="{ loading: versionState.submitLoading }"
        @ok="confirmVersion"
        @cancel="cancelVersion"
        width="900px"
        :body-style="{
                    paddingTop: '16px'
                }"
      >
        <div class="change-version-tip">
          <div class="version-modal-top-left">
            <ExclamationCircleOutlined style="color: #fab221; margin-right: 4px" />保存版本号和版本介绍后，点击保存将当前模板版本进行保存，最新保存的版本号默认展示</div
          >
          <div style="display: flex; align-items: center"
            ><div class="version-icon"></div> 当前版本：<span style="color: #262626; font-weight: 600">{{
                            currentTreeDate.versionCode
            }}</span>
          </div>
        </div>
        <div class="submit-version-form">
          <a-form ref="submitVersionRef" :model="versionState.submitForm" :rules="versionRules">
            <a-row>
              <a-col :span="24">
                <a-form-item label="版本号" name="versionCode">
                  <a-input v-model:value="versionState.submitForm.versionCode" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="版本介绍" name="versionDesc">
                  <a-textarea :rows="4" v-model:value="versionState.submitForm.versionDesc" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!--            保存版本-->
      <a-row :slots="'4:20'" style="height: 100%">
        <a-col :span="4" class="left-article">
          <a-row>
            <al-box justify="between" align="center">
              <div style="font-size: 16px; font-weight: bold; color: #262626">目录列表</div>
              <div class="right-btn">
                <div>
                  <div class="role-comm-icon" @click="handleChangeRole" title="角色管理"> </div>
                </div>
                <div class="add-icon" @click="handleTemplateManagerOpen" title="新建"></div>
              </div>
            </al-box>
          </a-row>
          <al-box class="search">
            <a-input autocomplete="off" v-model:value="state.templateName" placeholder="请输入" :allowClear="true" @change="getTemplateList">
              <template #suffix>
                <search-outlined />
              </template>
            </a-input>
          </al-box>
          <al-box class="tree" style="height: 800px; overflow: auto">
            <a-tree
              v-model:checkedKeys="state.treeProps.checkedKeys"
              v-model:selectedKeys="state.treeProps.selectedKeys"
              v-model:expandedKeys="state.treeProps.expandedKeys"
              :fieldNames="{ children: 'children', title: 'templateName', key: 'templateId' }"
              :selectedBackgroundColor="'#EBF1FF'"
              :backgroundColor="'#F5F5F5'"
              :tree-data="state.templateList"
              @select="handleTreeSelect"
            >
              <template #title="{ templateName, templateId }" class="btn-show">
                <div class="tree-btns">
                  <span>{{ (templateId, templateName) }}</span>
                  <div v-if="templateId.includes('下线')" style="display: inline-block" @click.stop="handleOnline(getStatusPrefix(templateId))">
                    <a-tooltip>
                      <template #title>发布模板</template>
                      <div class="fb-icon svg-icon"></div>
                    </a-tooltip>
                  </div>
                  <div v-if="templateId.includes('上线')" style="display: inline-block" @click.stop="handleOffline(getStatusPrefix(templateId))">
                    <a-tooltip>
                      <template #title>下线模板</template>
                      <div class="xx-icon svg-icon"></div>
                    </a-tooltip>
                  </div>
                  <div style="display: inline-block; margin: 0 5px" @click.stop="handleEditTemplate(getStatusPrefix(templateId))">
                    <a-tooltip>
                      <template #title>编辑</template>
                      <div class="bj-icon svg-icon"></div>
                    </a-tooltip>
                  </div>
                  <a-popconfirm @confirm="handleDeleteTemplate(templateId)" title="确定删除吗？">
                    <div none style="display: inline-block">
                      <a-tooltip>
                        <template #title>删除</template>
                        <div class="sc-icon svg-icon"></div>
                      </a-tooltip>
                    </div>
                  </a-popconfirm>
                </div>
              </template>
            </a-tree>
          </al-box>
        </a-col>
        <a-col :span="20" class="right-article">
          <al-box justify="between" style="margin-bottom: 16px; border-bottom: 1px solid #d9d9d9; padding-bottom: 21px" align="center">
            <div class="text">模板详情</div>
            <div class="right-tj">
              <div style="display: flex; gap: 16px; align-items: center">
                <div class="approve-type">
                  <div class="mb-icon"></div>
                  模板类型：<span style="font-weight: 600; color: #262626"> {{ state.templateType }}</span>
                </div>
                <div class="approve-status" v-if="state.templateType === '交付项目'">
                  <div class="status-icon"></div>产品线：<span style="font-weight: 600; color: #262626"> {{ state.productLine }}</span>
                </div>
                <div class="approve-status">
                  <div class="status-icon"></div>模板状态：<span style="font-weight: 600; color: #262626"> {{ state.approveStatus }}</span>
                </div>

                <!--                                <div class="version-status" v-if="state.templateType === '交付项目'">-->
                <!--                                    <div class="version-icon"></div>当前版本：<span-->
                <!--                                        style="font-weight: 600; color: #262626"-->
                <!--                                    >-->
                <!--                                        {{ currentTreeDate.versionCode }}</span-->
                <!--                                    >-->
                <!--                                </div>-->
                <a-space :size="8">
                  <!--                                    <a-button-->
                  <!--                                        type="primary"-->
                  <!--                                        @click="showChangeVersion"-->
                  <!--                                        v-if="state.templateType === '交付项目'"-->
                  <!--                                        >切换版本</a-button-->
                  <!--                                    >-->
                  <!--                                    <a-button-->
                  <!--                                        type="primary"-->
                  <!--                                        @click="showSubmitVersion"-->
                  <!--                                        v-if="state.templateType === '交付项目'"-->
                  <!--                                        >保存版本</a-button-->
                  <!--                                    >-->
                  <a-button type="primary" @click="showSelectType" v-if="state.templateType === '交付项目'">模板下发</a-button>
                  <a-button type="primary" v-if="state.templateType === '交付项目'" @click="handleOpenJfStage">项目阶段维护</a-button>
                  <a-button type="primary" @click="handleOpenStageModal">{{
                                        state.templateType === '交付项目' ? '里程碑项目阶段维护' : '项目阶段维护'
                  }}</a-button>

                  <a-button type="primary" @click="handleAddTask">新建任务</a-button>
                </a-space>
              </div>
            </div>
          </al-box>
          <div class="template-title-new" v-if="state.templateType === '交付项目'">
            <div class="template-left">
              <!--                            <ExclamationCircleFilled style="color: #fa6400; margin-right: 4px" />-->
              <!--                            项目阶段和任务编辑后，需保存版本，不保存切换版本上线后，已编辑的项目阶段和任务信息将丢失-->
            </div>
            <div class="template-right">
              <div>
                任务类型：
                <a-radio-group v-model:value="state.taskType" @change="radioChange">
                  <a-radio value="主流程">主流程</a-radio>
                  <a-radio value="数据专项">数据专项</a-radio>
                  <a-radio value="全品种专项">全品种专项</a-radio>
                </a-radio-group>
              </div>
            </div>
          </div>
          <al-box class="table-wrapper" v-if="state.templateType === '交付项目'">
            <a-table
              class="vid_a7g6eyj5wh"
              :bordered="true"
              :data-source="state.templateDetailList"
              :columns="state.tableProps.columns"
              :pagination="false"
              :scroll="{ x: scrollX, y: state.templateDetailList.length ? state.tableHeight : '' }"
              @resizeColumn="handleTaskResizeColumn"
              :loading="state.tableLoading"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'stageName'">
                  <span :title="record.stageName">{{
                                        record.stageSerialNumber + '.' + record.stageName
                  }}</span>
                </template>
                <template v-if="column.dataIndex === 'stageClassify'">
                  <span v-if="record.stageClassifyNo && record.stageClassify" :title="record.stageClassify">{{ record.stageClassifyNo + '.' + record.stageClassify }}</span>
                </template>
                <template v-if="column.dataIndex === 'dependencyTemplateTaskName'">
                  {{ record.dependencyTemplateTaskSerialNumber }}
                  {{ record.dependencyTemplateTaskName }}
                </template>
                <template v-if="state.tableProps.formatColumnsList.includes(column.dataIndex)">
                  <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                    <template #title>
                      <p style="color: #262626; margin: 0" v-for="(item, index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                    </template>
                    <div class="table-text">{{ text }}</div>
                  </a-tooltip>
                </template>

                <template v-if="column.dataIndex === 'attachmentList'">
                  <div class="ellipsis download-text" type="link" v-for="(item, index) in record.attachmentList" :key="index" @click="downloadFile(item)" :title="item.name">{{ item.name }} </div>
                </template>

                <template v-if="column.dataIndex === 'operate'">
                  <a-button style="padding: 0" size="small" type="link" @click="handleEditTask(record)"> 编辑</a-button>
                  <a-divider style="margin: 0 10px; border-color: #3875ff" type="vertical" />
                  <a-popconfirm title="是否确认删除任务？确认后对应任务的唯一ID将被删除" @confirm="handleDeleteTask(record.templateTaskId)">
                    <a-button type="link">删除</a-button>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
          </al-box>
          <al-box class="table-wrapper" v-else>
            <a-table
              class="vid_a7g6eyj5wh"
              :bordered="true"
              :data-source="state.templateDetailList"
              :columns="state.tableProps.ptColumns"
              :pagination="false"
              :scroll="{ x: scrollX, y: state.templateDetailList.length ? state.tableHeight : '' }"
              @resizeColumn="handleTaskResizeColumn"
            >
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'stageName'">
                  <span :title="record.stageName">{{
                                        record.stageSerialNumber + '.' + record.stageName
                  }}</span>
                </template>
                <template v-if="column.dataIndex === 'dependencyTemplateTaskName'">
                  {{ record.dependencyTemplateTaskSerialNumber }}
                  {{ record.dependencyTemplateTaskName }}
                </template>
                <template v-if="state.tableProps.formatColumnsList.includes(column.dataIndex)">
                  <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                    <template #title>
                      <p style="color: #262626; margin: 0" v-for="(item, index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                    </template>
                    <div class="table-text">{{ text }}</div>
                  </a-tooltip>
                </template>

                <template v-if="column.dataIndex === 'attachmentList'">
                  <div class="ellipsis download-text" type="link" v-for="(item, index) in record.attachmentList" :key="index" @click="downloadFile(item)" :title="item.name">{{ item.name }} </div>
                </template>

                <template v-if="column.dataIndex === 'operate'">
                  <a-button style="padding: 0" size="small" type="link" @click="handleEditTask(record)"> 编辑</a-button>
                  <a-divider style="margin: 0 10px; border-color: #3875ff" type="vertical" />
                  <a-popconfirm title="是否确认删除该任务？确认后对应任务的所有数据全部删除" @confirm="handleDeleteTask(record.templateTaskId)">
                    <a-button type="link">删除</a-button>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
          </al-box>
        </a-col>
      </a-row>
      <!-- 管理模板 -->
      <a-modal v-model:visible="state.templateManagerVisible" :title="state.title" :width="860" :maskClosable="false" :centered="true" :destroy-on-close="true" @ok="handleTemplateManagerOk">
        <a-form ref="templateRef1" name="dynamic_form_item" :model="state.modalTemplateList" :rules="state.templateRules">
          <a-row>
            <a-col :span="24">
              <a-form-item label="模板类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" name="templateType" :rules="state.templateRules.templateType">
                <a-select
                  :options="[
                                        {
                                            label: '平台项目',
                                            value: '平台项目'
                                        },
                                        {
                                            label: '交付项目',
                                            value: '交付项目'
                                        }
                                    ]"
                  :disabled="state.isEdit"
                  v-model:value="state.modalTemplateList.templateType"
                  placeholder="请输入"
                  :maxlength="12"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="模板名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" name="templateName" :rules="state.templateRules.templateName">
                <a-input :disabled="state.isEdit && state.isDisabled" v-model:value="state.modalTemplateList.templateName" placeholder="请输入" :maxlength="12" />
              </a-form-item>
            </a-col>
            <!--                        <a-col :span="24">-->
            <!--                            <a-form-item-->
            <!--                                label="模板编码"-->
            <!--                                :label-col="{ span: 4 }"-->
            <!--                                :wrapper-col="{ span: 20 }"-->
            <!--                                name="templateCode"-->
            <!--                                :rules="state.templateRules.templateCode"-->
            <!--                            >-->
            <!--                                <a-input-->
            <!--                                    :disabled="state.isEdit"-->
            <!--                                    v-model:value="state.modalTemplateList.templateCode"-->
            <!--                                    placeholder="请输入"-->
            <!--                                    :maxlength="20"-->
            <!--                                />-->
            <!--                            </a-form-item>-->
            <!--                        </a-col>-->
            <a-col :span="24" v-if="state.modalTemplateList.templateType === '交付项目'">
              <a-form-item label="产品线" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" name="productLine" :rules="state.templateRules.productLine">
                <a-select
                  v-model:value="state.modalTemplateList.productLine"
                  placeholder="请选择"
                  @focus="getProductLine"
                  :options="state.productLineList"
                  show-search
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                />
                <!--                                <a-input v-model:value="state.modalTemplateList.productLine" placeholder="请输入" />-->
              </a-form-item>
            </a-col>
            <a-form-item name="templateId">
              <a-input v-model:value="state.modalTemplateList.templateId" :maxlength="20" disabled type="hidden" />
            </a-form-item>
          </a-row>
          <a-row v-if="state.isEdit">
            <a-col :span="24"><span style="color: #aaaaaa; margin-left: 20px">模板内容需要先下线再编辑</span></a-col>
          </a-row>
        </a-form>
      </a-modal>

      <!-- 新建任务 -->
      <a-modal
        v-model:visible="state.taskVisible"
        :title="state.modalTaskTitle"
        :width="900"
        :maskClosable="false"
        :centered="true"
        okText="保存"
        class="task-modal"
        :destroy-on-close="true"
        :body-style="state.bodyStyle"
        @ok="handleTaskOk"
        :ok-button-props="{ loading: loadingState.taskLoading }"
      >
        <a-form :model="state.taskForm" ref="templateRef3" class="task-form" :rules="state.taskRules">
          <div class="title">基础信息</div>
          <div v-if="state.templateType === '交付项目'">
            <a-row>
              <a-col :span="24">
                <a-form-item label="任务类型" name="taskType" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                  <a-select
                    :options="[
                                            {
                                                label: '主流程',
                                                value: '主流程'
                                            },
                                            {
                                                label: '数据专项',
                                                value: '数据专项'
                                            },
                                            {
                                                label: '全品种专项',
                                                value: '全品种专项'
                                            }
                                        ]"
                    v-model:value="state.taskForm.taskType"
                    @change="jfMbChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="所属项目阶段" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="templateStageId">
                  <a-tree-select
                    v-model:value="state.taskForm.templateStageId"
                    show-search
                    style="width: 100%"
                    placeholder="请选择"
                    allow-clear
                    treeDefaultExpandAll
                    :tree-data="state.belongList"
                    :fieldNames="{
                                            children: 'children',
                                            label: 'title',
                                            value: 'value',
                                            key: 'value'
                                        }"
                    treeNodeFilterProp="stageName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="依赖任务" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="dependencyTemplateTaskIdList">
                  <a-tree-select
                    v-model:value="state.taskForm.dependencyTemplateTaskIdList"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    allow-clear
                    multiple
                    treeDefaultExpandAll
                    :tree-data="ylTaskData"
                    @focus="
                                            getYlTask(
                                                getStatusPrefix(state.treeProps.selectedKeys[0]),
                                                '',
                                                state.taskForm.templateTaskId
                                            )
                                        "
                    tree-node-filter-prop="taskName"
                    :field-names="{
                                            children: 'children',
                                            label: 'taskName',
                                            value: 'taskId'
                                        }"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item label="任务名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" name="taskName">
                  <a-input v-model:value="state.taskForm.taskName" :maxlength="20" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="任务序号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="serialNumber">
                  <a-input-number style="width: 100%" v-model:value="state.taskForm.serialNumber" :min="1" :step="1" :precision="0" placeholder="请输入" />
                  <!--                                  :disabled="state.taskForm.templateTaskId"-->
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="人天" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="workingHours">
                  <a-input v-model:value="state.taskForm.workingHours" :maxlength="8" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin: 1px 0 5px">
              <a-col :span="12">
                <a-form-item label="标记" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="markList">
                  <a-checkbox-group v-model:value="state.taskForm.markList" style="width: 100%">
                    <a-checkbox value="里程碑">里程碑</a-checkbox>
                    <a-checkbox value="关键路径">关键路径</a-checkbox>
                    <a-checkbox value="终验">终验</a-checkbox>
                    <a-checkbox value="财务">财务</a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="组任务" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                  <a-checkbox v-model:checked="state.taskForm.groupTask" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin: 0px 0 -4px">
              <a-col :span="12">
                <a-form-item label="任务周期分类" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassify">
                  <a-radio-group v-model:value="state.taskForm.periodClassify" :disabled="state.radioDisabled">
                    <a-radio value="T" style="margin-right: 16px">T</a-radio>
                    <a-radio value="N">N</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <span class="tips" style="margin-left: -183px; padding-top: 24px; line-height: 1">
                <exclamation-circle-outlined />
                N为项目开始的时间，T为启动会开始时间，例：N+3、T+5
              </span>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassifyStart" style="display: flex; justify-content: center">
                  <span style="display: inline-block; margin-right: 11px; width: 23px">{{ state.taskForm.periodClassify }}+</span>
                  <a-input style="width: 89%" v-model:value="state.taskForm.periodClassifyStart" :maxlength="10000" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="periodClassifyEnd">
                  <span style="display: inline-block; margin-right: 11px; width: 23px">{{ state.taskForm.periodClassify }}+</span>
                  <a-input style="width: 89%" v-model:value="state.taskForm.periodClassifyEnd" :maxlength="20" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="任务负责人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="directorRole">
                  <a-select
                    v-model:value="state.taskForm.directorRole"
                    placeholder="请选择"
                    @focus="getRolePeople"
                    :options="directorRoleList"
                    show-search
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="审核员" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="auditorRoleList">
                  <a-select
                    mode="multiple"
                    @focus="getRolePeople"
                    v-model:value="state.taskForm.auditorRoleList"
                    placeholder="请选择"
                    :max-tag-count="2"
                    :options="directorRoleList"
                    show-search
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="任务角色" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="templateTaskRoleList">
                  <a-select
                    mode="multiple"
                    @focus="getRolePeople"
                    v-model:value="state.taskForm.templateTaskRoleList"
                    placeholder="请选择"
                    :options="directorRoleList"
                    show-search
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-divider style="margin-top: 5px" />
            <div class="title"><span style="font-size: 14px; color: #ff4d4f; margin-right: 4px">*</span>完成标准</div>
            <a-row>
              <a-col :span="24">
                <a-form-item :wrapper-col="{ span: 24 }" name="finishStandard">
                  <a-textarea :rows="3" v-model:value="state.taskForm.finishStandard" placeholder="请输入" />
                </a-form-item>
                <div class="tips" style="margin-top: -4px">
                  请用”；“号区分不同细项的内容，格式参考：<br />
                  1）设计反讲机制及频率、并执行；<br />
                  2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                </div>
              </a-col>
            </a-row>
          </div>
          <div v-else class="pt-template">
            <a-row>
              <a-col :span="24">
                <a-form-item label="所属项目阶段" name="templateStageId">
                  <a-select v-model:value="state.taskForm.templateStageId" placeholder="请选择">
                    <a-select-option v-for="item in state.templateStageList" :value="item.templateStageId">
                      {{ item.stageName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="任务名称" name="taskName">
                  <a-input v-model:value="state.taskForm.taskName" :maxlength="20" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="任务序号" name="serialNumber">
                  <a-input-number v-model:value="state.taskForm.serialNumber" :min="1" :step="1" :precision="0" placeholder="请输入" :disabled="state.taskForm.templateTaskId" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin: 1px 0 5px">
              <a-col :span="12">
                <a-form-item label="任务负责人" name="directorRole">
                  <a-select
                    v-model:value="state.taskForm.directorRole"
                    placeholder="请选择"
                    @focus="getRolePeople"
                    :options="directorRoleList"
                    show-search
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="审核员" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" name="auditorRoleList">
                  <a-select
                    mode="multiple"
                    @focus="getRolePeople"
                    v-model:value="state.taskForm.auditorRoleList"
                    placeholder="请选择"
                    :max-tag-count="2"
                    :options="directorRoleList"
                    show-search
                    :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <a-divider style="margin-top: 5px" />
          <div class="title">审核标准</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="assessorStandard">
                <a-textarea :rows="3" v-model:value="state.taskForm.assessorStandard" placeholder="请输入" />
              </a-form-item>
              <div class="tips">
                请用”；“号区分不同细项的内容，格式参考：<br />
                1）设计反讲机制及频率、并执行；<br />
                2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
              </div>
            </a-col>
          </a-row>
          <a-divider />
          <div v-if="state.templateType === '交付项目'">
            <div class="title">注意事项</div>
            <a-row>
              <a-col :span="24">
                <a-form-item :wrapper-col="{ span: 24 }" name="note">
                  <a-textarea :rows="3" v-model:value="state.taskForm.note" placeholder="请输入" />
                </a-form-item>
                <div class="tips">
                  请用”；“号区分不同细项的内容，格式参考：<br />
                  1）设计反讲机制及频率、并执行；<br />
                  2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                </div>
              </a-col>
            </a-row>
            <a-divider style="border-color: #d9d9d9" />
          </div>
          <div v-if="state.templateType === '交付项目'">
            <div class="title">SOP</div>
            <a-row>
              <a-col :span="24">
                <a-form-item :wrapper-col="{ span: 24 }" name="note">
                  <a-textarea :rows="3" v-model:value="state.taskForm.sop" placeholder="请输入" />
                </a-form-item>
                <div class="tips">
                  请用”；“号区分不同细项的内容，格式参考：<br />
                  1）设计反讲机制及频率、并执行；<br />
                  2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                </div>
              </a-col>
            </a-row>
            <a-divider style="border-color: #d9d9d9" />
          </div>
          <div v-if="state.templateType === '平台项目'">
            <div class="title">执行SOP</div>
            <a-row>
              <a-col :span="24">
                <a-form-item :wrapper-col="{ span: 24 }" name="note">
                  <a-textarea :rows="3" v-model:value="state.taskForm.sop" placeholder="请输入" />
                </a-form-item>
                <div class="tips">
                  请用”；“号区分不同细项的内容，格式参考：<br />
                  1）设计反讲机制及频率、并执行；<br />
                  2）通过反讲，确认研发、产品、测试和现场项目人员等各角色均已对产品设计形成统一认知；
                </div>
              </a-col>
            </a-row>
            <a-divider style="border-color: #d9d9d9" />
          </div>

          <div class="title">模板附件</div>
          <a-row>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 24 }" name="attachmentList">
                <a-upload v-model:file-list="state.taskForm.attachmentList" :multiple="true" :before-upload="handlerUpload" @remove="handlerRemove" accept=".xlsx, image/*,.docx,, .xls,.mp4">
                  <a-button type="primary">
                    <upload-outlined />
                    上传
                  </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-if="state.templateType === '交付项目'">
            <a-col :span="24">
              <a-form-item label="备注" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }" name="description">
                <a-textarea v-model:value="state.taskForm.description" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
      <!-- 新建任务 -->
      <!--      角色管理-->
      <a-modal
        v-model:visible="state.roleVisible"
        title="角色管理"
        :width="770"
        :maskClosable="false"
        :centered="true"
        @ok="handleSubmitRole"
        :body-style="bodyStyle"
        :ok-button-props="{ loading: loadingState.roleLoading }"
      >
        <a-form ref="leaderRef" :model="state">
          <div class="role-father"><div class="role-title">项目领导小组</div></div>
          <!--                    <div class="role-div">-->
          <a-row :gutter="24" v-for="(item, index) in state.leaderModel" :key="item.uid">
            <a-col :span="11">
              <a-form-item
                label="角色名称"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['leaderModel', index, 'roleName']"
                :rules="[{ required: true, validator: validateLeaderName, trigger: 'blur' }]"
              >
                <a-input v-model:value="item.roleName" placeholder="请输入" :maxlength="20" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item
                label="排序"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['leaderModel', index, 'serialNumber']"
                :rules="[{ required: true, validator: validateLeader, trigger: 'blur' }]"
              >
                <a-input-number min="0" style="width: 100%" v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" />
              </a-form-item>
            </a-col>
            <a-col :span="1">
              <a-button style="margin-left: 0" type="link" class="template-delete" @click="deleteLeader(index, item)" size="small">删除 </a-button>
            </a-col>
          </a-row>
          <!--                    </div>-->
        </a-form>

        <a-button type="primary" ghost class="addRowBtn" @click="handleAddLeader">
          <template #icon>
            <plus-outlined />
          </template>
          新增
        </a-button>

        <a-form ref="responsibleRef" :model="state">
          <div class="role-father"><div class="role-title">项目负责人</div></div>
          <!--                    <div class="role-div">-->
          <a-row :gutter="24" v-for="(item, index) in state.responsibleModel" :key="item.uid">
            <a-col :span="11">
              <a-form-item
                label="角色名称"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['responsibleModel', index, 'roleName']"
                :rules="[{ required: true, validator: validateResponsibleName, trigger: 'blur' }]"
              >
                <a-input v-model:value="item.roleName" placeholder="请输入" :maxlength="20" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item
                label="排序"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['responsibleModel', index, 'serialNumber']"
                :rules="[{ required: true, validator: validateResponsible, trigger: 'blur' }]"
              >
                <a-input-number style="width: 100%" min="0" v-model:value="item.serialNumber" placeholder="请输入" :maxlength="4" />
              </a-form-item>
            </a-col>
            <a-col :span="1">
              <a-button style="margin-left: 0" type="link" class="template-delete" @click="deleteResponsible(index, item)" size="small">删除 </a-button>
            </a-col>
          </a-row>
          <!--                    </div>-->
        </a-form>

        <a-button type="primary" ghost class="addRowBtn-role" @click="handleAddResponsible">
          <template #icon>
            <plus-outlined />
          </template>
          新增
        </a-button>

        <a-form ref="memberRef" :model="state">
          <div class="role-father"><div class="role-title">项目组核心成员</div></div>
          <!--                    <div class="role-div">-->
          <a-row :gutter="24" v-for="(item, index) in state.memberModel" :key="item.uid">
            <a-col :span="11">
              <a-form-item
                label="角色名称"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['memberModel', index, 'roleName']"
                :rules="[{ required: true, validator: validateSerialName, trigger: 'blur' }]"
              >
                <a-input v-model:value="item.roleName" placeholder="请输入" :maxlength="20" />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item
                label="排序"
                :label-col="{ span: 7 }"
                :wrapper-col="{ span: 17 }"
                :name="['memberModel', index, 'serialNumber']"
                :rules="[{ required: true, validator: validateSerial, trigger: 'blur' }]"
              >
                <a-input-number style="width: 100%" v-model:value="item.serialNumber" placeholder="请输入" min="0" :maxlength="4" />
              </a-form-item>
            </a-col>
            <a-col :span="1">
              <a-button style="margin-left: 0" type="link" class="template-delete" @click="deleteMember(index, item)" size="small">删除 </a-button>
            </a-col>
          </a-row>
          <!--                    </div>-->
        </a-form>

        <a-button type="primary" ghost class="addRowBtn-role-last" @click="handleAddMember">
          <template #icon>
            <plus-outlined />
          </template>
          新增
        </a-button>
      </a-modal>
      <!--      角色管理-->
      <!-- end vid_tmbu89crd9 自定义模板_eqthivse55 -->
      <!-- begin vid_7mpzuut474 图片_79kuia92f9 -->
      <al-image
        v-if="false"
        class="vid_7mpzuut474"
        :emptyImgSrc="''"
        :src="vid_7mpzuut474_props.src"
      />
      <!-- end vid_7mpzuut474 图片_79kuia92f9 -->
      <!-- begin vid_anugqgw6tj 图片_67v30plhw0 -->
      <al-image
        v-if="false"
        class="vid_anugqgw6tj"
        :emptyImgSrc="''"
        :src="vid_anugqgw6tj_props.src"
      />
      <!-- end vid_anugqgw6tj 图片_67v30plhw0 -->
      <!-- begin vid_635p7t0mxy 图片_jppats3tf6 -->
      <al-image
        v-if="false"
        class="vid_635p7t0mxy"
        :emptyImgSrc="''"
        :src="vid_635p7t0mxy_props.src"
      />
      <!-- end vid_635p7t0mxy 图片_jppats3tf6 -->
      <!-- begin vid_fi61s0refz 图片_hg6eklhtq7 -->
      <al-image
        v-if="false"
        class="vid_fi61s0refz"
        :emptyImgSrc="''"
        :src="vid_fi61s0refz_props.src"
      />
      <!-- end vid_fi61s0refz 图片_hg6eklhtq7 -->
      <!-- begin vid_cek0nlome4 图片_get36w6vd2 -->
      <al-image
        v-if="false"
        class="vid_cek0nlome4"
        :emptyImgSrc="''"
        :src="vid_cek0nlome4_props.src"
      />
      <!-- end vid_cek0nlome4 图片_get36w6vd2 -->
      <!-- begin vid_hkwubq5rs4 图片_xwtjtpelhi -->
      <al-image
        v-if="false"
        class="vid_hkwubq5rs4"
        :emptyImgSrc="''"
        :src="vid_hkwubq5rs4_props.src"
      />
      <!-- end vid_hkwubq5rs4 图片_xwtjtpelhi -->
      <!-- begin vid_qbnzco0fzl 图片_6ex1nk40z5 -->
      <al-image
        v-if="false"
        class="vid_qbnzco0fzl"
        :emptyImgSrc="''"
        :src="vid_qbnzco0fzl_props.src"
      />
      <!-- end vid_qbnzco0fzl 图片_6ex1nk40z5 -->
      <!-- begin vid_jikchjp1e0 图片_cnc6hpbjb9 -->
      <al-image
        v-if="false"
        class="vid_jikchjp1e0"
        :emptyImgSrc="''"
        :src="vid_jikchjp1e0_props.src"
      />
      <!-- end vid_jikchjp1e0 图片_cnc6hpbjb9 -->
      <!-- begin vid_vrle92p67l 图片_b69op122o8 -->
      <al-image
        v-if="false"
        class="vid_vrle92p67l"
        :emptyImgSrc="''"
        :src="vid_vrle92p67l_props.src"
      />
      <!-- end vid_vrle92p67l 图片_b69op122o8 -->
      <!-- begin vid_433oha7j2l 容器_6pbdttnntv -->
      <al-box v-if="false" class="vid_433oha7j2l">
        <!-- begin vid_ze7avqw1jv 自定义按钮做隐藏 -->
        <span class="vid_ze7avqw1jv"> 自定义按钮做隐藏 </span>
        <!-- end vid_ze7avqw1jv 自定义按钮做隐藏 -->
        <!-- begin vid_3md05a2274 角色维护 -->
        <a-button v-if="false" v-permission="'3000000298_vid_3md05a2274'" class="vid_3md05a2274"> 角色维护 </a-button>
        <!-- end vid_3md05a2274 角色维护 -->
        <!-- begin vid_4dfaimpevd 新建模板 -->
        <a-button v-if="false" v-permission="'3000000298_vid_4dfaimpevd'" class="vid_4dfaimpevd"> 新建模板 </a-button>
        <!-- end vid_4dfaimpevd 新建模板 -->
        <!-- begin vid_wemi9kkzy3 编辑模板 -->
        <a-button v-if="false" v-permission="'3000000298_vid_wemi9kkzy3'" class="vid_wemi9kkzy3"> 编辑模板 </a-button>
        <!-- end vid_wemi9kkzy3 编辑模板 -->
        <!-- begin vid_njwqjjf4oz 删除模板 -->
        <a-button v-if="false" v-permission="'3000000298_vid_njwqjjf4oz'" class="vid_njwqjjf4oz"> 删除模板 </a-button>
        <!-- end vid_njwqjjf4oz 删除模板 -->
        <!-- begin vid_8varljz995 模板下发 -->
        <a-button v-if="false" v-permission="'3000000298_vid_8varljz995'" class="vid_8varljz995"> 模板下发 </a-button>
        <!-- end vid_8varljz995 模板下发 -->
        <!-- begin vid_fagfhdyqal 项目阶段维护 -->
        <a-button v-if="false" v-permission="'3000000298_vid_fagfhdyqal'" class="vid_fagfhdyqal"> 项目阶段维护 </a-button>
        <!-- end vid_fagfhdyqal 项目阶段维护 -->
        <!-- begin vid_ewhcp7z4d2 里程碑阶段维护 -->
        <a-button v-if="false" v-permission="'3000000298_vid_ewhcp7z4d2'" class="vid_ewhcp7z4d2"> 里程碑阶段维护 </a-button>
        <!-- end vid_ewhcp7z4d2 里程碑阶段维护 -->
        <!-- begin vid_mvx0qa8zez 新建任务 -->
        <a-button v-if="false" v-permission="'3000000298_vid_mvx0qa8zez'" class="vid_mvx0qa8zez"> 新建任务 </a-button>
        <!-- end vid_mvx0qa8zez 新建任务 -->
        <!-- begin vid_4rhyrrsqlp 模板上下线 -->
        <a-button v-if="false" v-permission="'3000000298_vid_4rhyrrsqlp'" class="vid_4rhyrrsqlp"> 模板上下线 </a-button>
        <!-- end vid_4rhyrrsqlp 模板上下线 -->
      </al-box>
      <!-- end vid_433oha7j2l 容器_6pbdttnntv -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');
// 图片 http://10.40.0.33:9001/file-storage/493877587527297024.png
import vid_7mpzuut474_imageUrl from '@/assets/images/43411421865f3c94aace34e4cecb9b5f.png'

    const vid_7mpzuut474_props = reactive({
          src: vid_7mpzuut474_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/493877597704775680.png
import vid_anugqgw6tj_imageUrl from '@/assets/images/6595ac705db81f7111014ba1177e6713.png'

    const vid_anugqgw6tj_props = reactive({
          src: vid_anugqgw6tj_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498070174068860928.png
import vid_635p7t0mxy_imageUrl from '@/assets/images/6b7a2df6895b5e1cd59f7a05632f506c.png'

    const vid_635p7t0mxy_props = reactive({
          src: vid_635p7t0mxy_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498071074988582912.png
import vid_fi61s0refz_imageUrl from '@/assets/images/3143007b7b9ec3cdfbdcb2c86e201e1d.png'

    const vid_fi61s0refz_props = reactive({
          src: vid_fi61s0refz_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498071804598249472.png
import vid_cek0nlome4_imageUrl from '@/assets/images/7b21d98e644bc5c629fefec41371b11a.png'

    const vid_cek0nlome4_props = reactive({
          src: vid_cek0nlome4_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498072051854567424.png
import vid_hkwubq5rs4_imageUrl from '@/assets/images/b56738fd4e8f673cdc5ce6263f08f774.png'

    const vid_hkwubq5rs4_props = reactive({
          src: vid_hkwubq5rs4_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498417142173493248.png
import vid_qbnzco0fzl_imageUrl from '@/assets/images/a7b7b19d0b305700bb1cc4cf0d1e0804.png'

    const vid_qbnzco0fzl_props = reactive({
          src: vid_qbnzco0fzl_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498417206669305856.png
import vid_jikchjp1e0_imageUrl from '@/assets/images/a1909175547f60a68441f984ea830d71.png'

    const vid_jikchjp1e0_props = reactive({
          src: vid_jikchjp1e0_imageUrl,
  })
// 图片 http://10.40.0.33:9001/file-storage/498417235920381952.png
import vid_vrle92p67l_imageUrl from '@/assets/images/e690b7e9e3adc409c426478a6d7d3852.png'

    const vid_vrle92p67l_props = reactive({
          src: vid_vrle92p67l_imageUrl,
  })



      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  // 阶段权重校验
      // 阶段角色权重校验
      const validateJsqz = (rule, value) => {
          let str = rule.field
          let index = str.match(/\.(\d+)\./)[1]
          // 1. 校验是否为有效的数字（正数且最多一位小数）
          const reg = new RegExp(/^(0|([1-9][0-9]*))(\.[0-9])?$/)
          if (value !== undefined && value !== null) {
              if (!reg.test(value)) {
                  return Promise.reject('请输入小数点后一位的正整数')
              }
          } else {
              return Promise.reject('请输入阶段权重')
          }

          // 2. 获取当前阶段的所有角色权重
          const currentStage = state.templateStageList[index] // 获取当前阶段
          const totalWeight = currentStage.projectTemplateStageRoleWeightList.reduce((sum, roleItem) => {
              return sum + (parseFloat(roleItem.roleWeight) || 0) // 累加权重
          }, 0)

          // 3. 校验当前阶段的权重总和是否超过 100
          if (totalWeight !== 100) {
              return Promise.reject('阶段角色的权重总和必须为100')
          }

          // 校验成功
          return Promise.resolve()
      }
      const validateJsjs = (rule, value) => {
          let str = rule.field
          let index = str.match(/\.(\d+)\./)[1]
          // 1. 校验是否为有效的数字（正数且最多一位小数）
          const reg = new RegExp(/^(0|([1-9][0-9]*))(\.[0-9])?$/)
          if (!value) {
              return Promise.reject('请选择阶段角色')
          }

          // 2. 获取当前阶段的所有角色权重
          const currentStage = state.templateStageList[index] // 获取当前阶段
          const arr = currentStage.projectTemplateStageRoleWeightList.filter(item => item.role === value)
          if (arr.length > 1) {
              return Promise.reject('该角色已经存在，请选择其他角色')
          }
          // 校验成功
          return Promise.resolve()
      }
      // 任务状态校验
      const validateStatus = (rule, value) => {
          if (!value) {
              return Promise.resolve() // 允许为空
          }

          // 正则表达式：匹配汉字和数字
          const regex = /^[\u4e00-\u9fa5\d]+$/

          if (!regex.test(value)) {
              return Promise.reject('只能输入汉字或数字')
          }

          return Promise.resolve()
      }
      const bodyStyle = {
          paddingBottom: '0',
          paddingTop: '16px',
          height: '700px',
          overflow: 'auto'
      }
      const validateTemplateCode = (rule, value, name) => {
          if (value) {
              const reg = new RegExp(/^[1-9]\d*$/)
              if (!reg.test(value)) {
                  return Promise.reject('请输入正整数')
              } else {
                  return Promise.resolve()
              }
          } else {
              return Promise.reject('请输入模板编码')
          }
      }

      const validateStageCode = (rule, value) => {
          if (value !== undefined && value !== null) {
              const reg = new RegExp(/^(0|([1-9][0-9]*))(\.\d{1,2})?$/)
              if (!reg.test(value)) {
                  return Promise.reject('请输入小数点后两位以内的正数数字')
              } else {
                  return Promise.resolve()
              }
          } else {
              return Promise.reject('请输入项目阶段序号')
          }
      }
      const validateQzCode = (rule, value) => {
          if (value !== undefined && value !== null) {
              // 正则表达式：匹配正整数或小数点后最多一位的正数
              const reg = new RegExp(/^(0|([1-9][0-9]*))(\.[0-9])?$/)
              if (!reg.test(value)) {
                  return Promise.reject('请输入小数点后一位的正整数')
              } else {
                  return Promise.resolve()
              }
          } else {
              return Promise.resolve()
          }
      }
      // 阶段权重校验

      const workingHoursValidate = async (rule, value, callback) => {
          if (!value) {
              return Promise.reject('请输入人天')
          }
          if (!/^[1-9]\d*\.5$|0\.5$|^[1-9]\d*$/.test(value)) {
              return Promise.reject(new Error('请输入0.5为倍数的正数数字'))
          }
      }

      const timeValidate = async (rule, value, callback) => {
          if (!value) {
              return Promise.reject('请输入')
          }
          if (!/^[0-9]{1,4}$/.test(value)) {
              return Promise.reject(new Error('请输入0-10000以内的整数数字'))
          }
      }

      const initTaskForm = () => ({
          templateStageId: undefined, //项目阶段id
          taskType: undefined, //项目类型
          templateTaskId: undefined, //任务id
          taskName: undefined, //任务名称
          serialNumber: undefined, //任务序号
          workingHours: undefined, //预计投入工时/人天
          markList: [], //标记
          groupTask: false, //标记
          periodClassify: 'T', //周期分类
          periodClassifyStart: undefined, //周期分类开始时间
          periodClassifyEnd: undefined, //周期分类结束时间
          directorRole: undefined, //负责人角色
          auditorRoleList: undefined, //审核员角色
          templateTaskRoleList: undefined, //审核员角色
          finishStandard: undefined, //完成标准
          assessorStandard: undefined, //审核标准
          workItem: undefined, //甲方工作事项
          note: undefined, //注意事项
          attachmentList: [], //附件
          description: undefined, //备注
          sop: undefined, //sop,
          dependencyTemplateTaskIdList: [] //依赖任务
      })
      const auditorRole = [
          { value: '项目总监', label: '项目总监' },
          { value: 'PMO', label: 'PMO' },
          { value: '副总裁', label: '副总裁' },
          { value: '数据实施总监', label: '数据实施总监' },
          { value: '项目经理', label: '项目经理' },
          { value: '产品经理', label: '产品经理' },
          { value: '技术经理', label: '技术经理' }
      ]

      const state = reactive({
          templateType: '',
          approveStatus: '',
          productLine: '',
          title: '',
          templateManagerVisible: false,
          projectStageVisible: false,
          isEdit: false,
          isDisabled: false,
          tableLoading: false,
          milepostLoading: false,
          taskType: '主流程',
          bodyStyle: {
              height: '700px',
              overflow: 'auto',
              padding: '24px 24px 0px 24px'
          },
          tableHeight: 600,
          taskVisible: false,
          ptTaskVisible: false,
          templateName: '',
          treeProps: {
              lazyParams: undefined,
              selected: { singleValue: '', title: [], value: [], option: [], singleLabel: '' },
              clickNode: { nodeTitle: '', nodeKey: '', nodeParentKey: '' },
              checkedKeys: [],
              selectedKeys: [],
              expandedKeys: [],
              treeData: []
          },
          belongList: [],
          productLineList: [],
          tableProps: {
              columns: [
                  {
                      title: '项目阶段',
                      dataIndex: 'stageClassify',
                      align: 'left',
                      width: '100px',
                      ellipsis: true,
                      customCell: item => {
                          const { rowSpan_stageClassify, isFirst_stageClassify } = item
                          return {
                              rowSpan: rowSpan_stageClassify,
                              style: {
                                  borderTop: isFirst_stageClassify ? '1px solid #3875ff' : undefined,
                                  fontSize: '16px',
                                  color: '#262626',
                                  fontWeight: '600'
                              }
                          }
                      }
                  },
                  {
                      title: '里程碑阶段',
                      dataIndex: 'stageName',
                      align: 'left',
                      width: '140px',
                      ellipsis: true,
                      customCell: item => {
                          const { rowSpan_stageName, isFirst_stageName } = item
                          return {
                              rowSpan: rowSpan_stageName,
                              style: {
                                  fontSize: '16px',
                                  color: '#262626',
                                  fontWeight: '600',
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '目标',
                      dataIndex: 'stageGoals',
                      align: 'left',
                      width: '140px',
                      ellipsis: true,
                      customCell: item => {
                          const { rowSpan_stageName, isFirst_stageName } = item
                          return {
                              rowSpan: rowSpan_stageName,
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '任务序号',
                      dataIndex: 'serialNumber',
                      align: 'center',
                      width: '100px',
                      ellipsis: true,
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      dataIndex: 'taskName',
                      ellipsis: true,
                      align: 'center',
                      resizable: true,
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },

                  {
                      title: '任务负责人（角色）',
                      dataIndex: 'directorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '180px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '审核员（角色）',
                      dataIndex: 'auditorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '160px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '任务角色',
                      dataIndex: 'templateTaskRole',
                      ellipsis: true,
                      align: 'center',
                      width: '160px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '开始时间',
                      dataIndex: 'periodClassifyStart',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '结束时间',
                      dataIndex: 'periodClassifyEnd',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '人天',
                      dataIndex: 'workingHours',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '依赖任务',
                      dataIndex: 'dependencyTemplateTaskName',
                      ellipsis: true,
                      align: 'center',
                      width: '180px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '模板附件',
                      dataIndex: 'attachmentList',
                      ellipsis: true,
                      align: 'center',
                      width: '140px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '完成标准',
                      dataIndex: 'finishStandard',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '审核标准',
                      dataIndex: 'assessorStandard',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '注意事项',
                      dataIndex: 'note',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: 'SOP',
                      dataIndex: 'sop',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  // {
                  //     title: '甲方工作事项',
                  //     dataIndex: 'workItem',
                  //     ellipsis: true,
                  //     align: 'center',
                  //     width: '150px',
                  //     customCell: ({ rowSpan, rowIndex, border }) => {
                  //         return {
                  //             style: {
                  //                 borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                  //             }
                  //         }
                  //     }
                  // },
                  {
                      title: '标记',
                      dataIndex: 'markList',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  // {
                  //     title: '关键路径',
                  //     dataIndex: 'mark',
                  //     ellipsis: true,
                  //     align: 'center',
                  //     width: '120px',
                  //     customCell: ({ rowSpan, rowIndex, border }) => {
                  //         return {
                  //             style: {
                  //                 borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                  //             }
                  //         }
                  //     }
                  // },
                  {
                      title: '备注',
                      dataIndex: 'description',
                      ellipsis: true,
                      align: 'center',
                      width: '80px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  },
                  {
                      title: '操作',
                      dataIndex: 'operate',
                      align: 'center',
                      fixed: 'right',
                      width: '150px',
                      customCell: item => {
                          const { isFirst_stageName } = item
                          return {
                              style: {
                                  borderTop: isFirst_stageName ? '1px solid #3875ff' : undefined
                              }
                          }
                      }
                  }
              ],
              ptColumns: [
                  {
                      title: '项目阶段',
                      dataIndex: 'stageName',
                      ellipsis: true,
                      align: 'left',
                      width: '140px',
                      fixed: 'left',
                      customCell: item => {
                          const { rowIndex, rowSpan } = item
                          return {
                              rowSpan: rowSpan,
                              style: {
                                  fontSize: '16px',
                                  color: '#262626',
                                  fontWeight: '600',
                                  borderTop: rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '任务序号',
                      dataIndex: 'serialNumber',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '任务名称',
                      dataIndex: 'taskName',
                      ellipsis: true,
                      align: 'center',
                      resizable: true,
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },

                  {
                      title: '负责人',
                      dataIndex: 'directorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '审核员（角色）',
                      dataIndex: 'auditorRole',
                      ellipsis: true,
                      align: 'center',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '审核标准',
                      dataIndex: 'assessorStandard',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '模板附件',
                      dataIndex: 'attachmentList',
                      ellipsis: true,
                      align: 'center',
                      width: '140px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '执行SOP',
                      dataIndex: 'sop',
                      ellipsis: true,
                      align: 'center',
                      width: '100px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  },
                  {
                      title: '操作',
                      dataIndex: 'operate',
                      align: 'center',
                      fixed: 'right',
                      width: '150px',
                      customCell: ({ rowSpan, rowIndex, border }) => {
                          return {
                              style: {
                                  borderTop: border && rowIndex ? '1px solid #3875ff' : 'none'
                              }
                          }
                      }
                  }
              ],
              formatColumnsList: [
                  'finishStandard',
                  'assessorStandard',
                  'note',
                  'workItem',
                  'sop',
                  'stageCriticalPath',
                  'stageFirstPartyMainRole',
                  'stageFirstPartyRespAndCoopMatters',
                  'stageGoals'
              ]
          },
          templateList: [],
          // 模板下阶段
          templateStageList: [],
          // 包含项目阶段和任务详情
          templateDetailList: [],
          // 当前模板
          currentTemplateInfo: null,
          currentStageId: null,
          currentTemplateTaskList: [],
          templateRules: {
              templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
              templateCode: [{ required: true, validator: validateTemplateCode, trigger: 'blur' }],
              productLine: [{ required: true, message: '请输入产品线', trigger: 'blur' }],
              templateType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }]
          },
          stageRules: {
              stageName: [{ required: true, message: '请输入项目阶段名称', trigger: 'blur' }],
              serialNumber: [{ required: true, validator: validateStageCode, trigger: 'blur' }],
              goals: [{ required: false, message: '请输入目标', trigger: 'blur' }],
              crutialPath: [{ required: false, message: '请输入关键路径', trigger: 'blur' }],
              firstPartyMainRole: [{ required: false, message: '请输入甲方主要角色', trigger: 'blur' }],
              firstPartyRespAndCoopMatters: [{ required: false, message: '请输入甲方责任及配合事项', trigger: 'blur' }],
              stageWeight: [{ required: false, validator: validateQzCode, trigger: 'blur' }],
              role: [{ required: true, validator: validateJsjs, trigger: 'blur' }],
              roleWeight: [{ required: true, validator: validateJsqz, trigger: 'blur' }],
              taskStatus: [{ required: false, validator: validateStatus, trigger: 'blur' }]
          },
          taskRules: {
              templateStageId: [{ required: true, message: '请选择所属项目阶段', trigger: 'blur' }],
              taskType: [{ required: true, message: '请选择任务类型', trigger: 'blur' }],
              taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
              serialNumber: [{ required: true, message: '请输入任务序号', trigger: 'blur' }],
              workingHours: [{ required: true, validator: workingHoursValidate, trigger: 'blur' }],
              markList: [{ required: false, message: '请选择标记', trigger: 'blur' }],
              periodClassify: [{ required: true, message: '请选择周期分类', trigger: 'blur' }],
              periodClassifyStart: [{ required: true, validator: timeValidate, trigger: 'blur' }],
              periodClassifyEnd: [{ required: true, validator: timeValidate, trigger: 'blur' }],
              directorRole: [{ required: true, message: '请选择任务负责人', trigger: 'blur' }],
              auditorRoleList: [{ required: true, message: '请选择审核员', trigger: 'blur' }],
              finishStandard: [{ required: true, message: '请输入完成标准', trigger: 'blur' }]
          },
          modalTemplateList: {},
          modalStageList: [],
          templateStatusLoadingId: undefined,
          modalTaskTitle: '新建任务',
          editTaskId: null,
          taskForm: initTaskForm(),
          uploadProps: {
              uploadFile: data =>
                  request({
                      url: '/file-storage/api/v1/file/upload',
                      method: 'POST',
                      responseType: 'blob',
                      withCredentials: false,
                      data,
                      timeout: 360000,
                      headers: {}
                  })
          },
          radioDisabled: false,
          roleVisible: false,
          leaderModel: [],
          responsibleModel: [],
          memberModel: []
      })

      const templateRef1 = ref()
      const templateRef2 = ref()
      const templateRef3 = ref()

      // watch(
      //     () => state.templateList,
      //     list => {
      //         if (!list.length) {
      //             return
      //         }
      //         state.treeProps.selectedKeys = [list[0].templateId]
      //         state.templateType = list[0].templateType
      //         getVersionId(getStatusPrefix(selectKeys[0]))
      //         getTaskList(getStatusPrefix(list[0].templateId))
      //         getTemplateDetail(getStatusPrefix(list[0].templateId))
      //     },
      //     { deep: true, immediate: true }
      // )
      watch(
          () => state.templateList,
          async list => {
              // 改成 async
              if (!list.length) {
                  return
              }

              state.treeProps.selectedKeys = [list[0].templateId]
              state.templateType = list[0].templateType
              state.productLine = list[0].productLine

              try {
                  // await getVersionId(getStatusPrefix(state.treeProps.selectedKeys[0])) // 确保执行完毕后再执行后续操作
                  const statusPrefix = getStatusPrefix(list[0].templateId)
                  await getTaskList(statusPrefix)
                  await getTemplateDetail(statusPrefix)
              } catch (error) {
                  console.error('Error in watch templateList:', error)
              }
          },
          { deep: true, immediate: true }
      )

      const handleTemplateManagerOpen = () => {
          state.title = '新建模板'
          state.isEdit = false
          state.modalTemplateList = {
              templateId: null,
              templateName: undefined,
              templateCode: undefined,
              templateType: undefined,
              status: '下线',
              uid: $guid()
          }

          state.templateManagerVisible = true
      }
      function handleEditTemplate(templateId) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/detail/${templateId}`).then(data => {
              if (data.code === 200) {
                  if (data.data.approvalStatus?.includes('审批中') && data.data.approvalStatus) {
                      message.info('请通过审批再进行此操作')
                  } else {
                      if (data.data.status === '上线') {
                          state.isDisabled = true
                      } else {
                          state.isDisabled = false
                      }
                      state.modalTemplateList.templateName = data.data.templateName
                      state.modalTemplateList.templateCode = data.data.templateCode
                      state.modalTemplateList.templateId = data.data.templateId
                      state.modalTemplateList.templateType = data.data.templateType
                      state.modalTemplateList.productLine = data.data.productLine
                      getProductLine()
                      state.title = '编辑模板'
                      state.isEdit = true
                      state.templateManagerVisible = true
                  }
              } else {
                  message.error(data.message)
              }
          })
      }
      function handleTaskResizeColumn(w, col) {
          col.width = w
      }
      function radioChange() {
          getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]))
      }
      const scrollX = state.tableProps.columns.reduce((pre, cur) => {
          return parseInt(pre.width) + parseInt(cur.width)
      }, {})
      const currentTreeDate = ref({})
      // const handleTreeSelect = (selectKeys, e) => {
      //     getVersionId(e.node.templateId)
      //     state.templateType = e.node.templateType
      //     if (state.templateType === '交付项目') {
      //         state.taskType = '主流程'
      //     } else {
      //         state.taskType = ''
      //     }
      //     console.log(e)
      //     getTaskList(getStatusPrefix(selectKeys[0]))
      //     getTemplateDetail(getStatusPrefix(selectKeys[0]))
      // }
      const handleTreeSelect = async (selectKeys, e) => {
          if (selectKeys.length == 0) {
              return
          }
          try {
              state.templateType = e.node.templateType
              state.productLine = e.node.productLineName
              state.taskType = state.templateType === '交付项目' ? '主流程' : ''
              // await getVersionId(getStatusPrefix(e.node.templateId)) // 确保执行完毕

              const statusPrefix = getStatusPrefix(selectKeys[0])
              await getTaskList(statusPrefix)
              await getTemplateDetail(statusPrefix)
          } catch (error) {
              console.error('Error in handleTreeSelect:', error)
          }
      }

      const currentVersionCode = ref()
      function getVersionId(templateId, versionId) {
          // if (state.templateType === '平台项目') {
          //     currentTreeDate.value = {}
          //     return {}
          // }
          return get(
              // ✅ 这里要 `return`
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/version/status/search/${templateId}?versionId=${
                  versionId || ''
              }`
          ).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  throw new Error(data.message) // 🚨 确保错误能被 `catch`
              }
              currentTreeDate.value = data.data
              return data.data // ✅ 让 `await getVersionId()` 能拿到结果
          })
      }

      function getTemplateDetail(templateId) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/detail/${templateId}`).then(data => {
              state.approveStatus = data.data.status
              state.productLine = data.data.productLineName
              state.templateType = data.data.templateType
          })
      }
      const handleTemplateManagerOk = () => {
          templateRef1.value.validateFields().then(res => {
              if (state.isEdit === false) {
                  //   新建
                  post('/solution-ppm/api/v2/built-in-system-ppm/project/template/create', state.modalTemplateList).then(
                      data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              state.templateManagerVisible = false
                              getTemplateList()
                          } else {
                              message.error(data.message)
                          }
                      }
                  )
              } else {
                  // 编辑
                  put(`/solution-ppm/api/v2/built-in-system-ppm/project/template/modify`, state.modalTemplateList).then(
                      data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              state.templateManagerVisible = false
                              getTemplateList()
                          } else {
                              message.info(data.message)
                          }
                      }
                  )
              }
          })
      }

      const handleStageManagerOk = () => {
          templateRef2.value.validateFields().then(res => {
              state.milepostLoading = true
              updateStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), res.templateStageList, () => {
                  getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                      state.projectStageVisible = false
                      message.success('保存成功')
                  })
              })
          })
      }

      const handleTaskOk = () => {
          templateRef3.value.validateFields().then(res => {
              if (Number(res.periodClassifyStart) > Number(res.periodClassifyEnd)) {
                  message.error('开始时间不能大于结束时间')
                  return
              }
              if (!state.taskForm.templateTaskId) {
                  handleCreateTask()
              } else {
                  handleUpdateTask()
              }
          })
      }

      const handleAddTask = () => {
          if (!state.treeProps.selectedKeys.length) {
              message.info('请先选择模板')
              return
          }
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          if (state.templateType !== '交付项目') {
              getStageList(
                  getStatusPrefix(state.treeProps.selectedKeys[0]),
                  result => {
                      state.taskForm = initTaskForm()
                      state.modalTaskTitle = '新建任务'
                      state.taskVisible = true
                      state.radioDisabled = false
                  },
                  state.taskType
              )
          } else {
              state.taskForm = initTaskForm()
              state.modalTaskTitle = '新建任务'
              state.taskVisible = true
              state.radioDisabled = false
          }
      }
      // 交付模板任务选择项目阶段格式化成树
      function formatToTreeSelect(data) {
          const groupMap = new Map()
          let groupIndex = 1

          data.forEach(item => {
              const classify = item.stageClassify
              if (!groupMap.has(classify)) {
                  groupMap.set(classify, {
                      title: classify || '未分类',
                      value: `group-${groupIndex++}`,
                      disabled: true,
                      children: []
                  })
              }
              groupMap.get(classify).children.push({
                  title: item.stageName,
                  value: item.templateStageId
              })
          })

          return Array.from(groupMap.values())
      }
      function getBelongList() {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}/stage/list?stageType=${state.taskForm.taskType}&versionId=${currentTreeDate.value.versionId || ''}`
          ).then(res => {
              state.belongList = formatToTreeSelect(res.data)
              console.log(state.belongList, 'belongList')
          })
      }
      function jfMbChange() {
          state.taskForm.templateStageId = undefined
          // getStageList(getStatusPrefix(state.treeProps.selectedKeys[0]), result => {}, state.taskForm.taskType)
          getBelongList()
      }
      const handleEditTask = record => {
          console.log(record)
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          if (!record.attachmentList) {
              record.attachmentList = []
          }
          const { dependencyTemplateTaskName, dependencyTemplateTaskSerialNumber, ...oldData } = cloneDeep(record)
          state.taskForm = oldData
          if (state.taskForm?.periodClassifyStart.indexOf('+') !== -1) {
              state.taskForm.periodClassifyStart = state.taskForm.periodClassifyStart.slice(2)
          }
          if (state.taskForm?.periodClassifyEnd.indexOf('+') !== -1) {
              state.taskForm.periodClassifyEnd = state.taskForm.periodClassifyEnd.slice(2)
          }

          if (state.templateType === '交付项目') {
              getBelongList()
              getYlTask(getStatusPrefix(state.treeProps.selectedKeys[0]), '', state.taskForm.templateTaskId)
              state.modalTaskTitle = '编辑任务'
              state.taskVisible = true
              state.radioDisabled = true
          } else {
              getStageList(
                  getStatusPrefix(state.treeProps.selectedKeys[0]),
                  result => {
                      getYlTask(getStatusPrefix(state.treeProps.selectedKeys[0]), '', state.taskForm.templateTaskId)
                      state.modalTaskTitle = '编辑任务'
                      state.taskVisible = true
                      state.radioDisabled = true
                  },
                  state.taskType
              )
          }
      }
      // const handleEditTask = record => {
      //     const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
      //     if (currentInfo.status === '上线') {
      //         message.info('请先下线该模板再继续操作')
      //         return
      //     }
      //     if (!record.attachmentList) {
      //         record.attachmentList = []
      //     }
      //     const { dependencyTemplateTaskName, dependencyTemplateTaskSerialNumber, ...oldData } = cloneDeep(record)
      //     state.taskForm = oldData
      //     if (state.taskForm?.periodClassifyStart.indexOf('+') !== -1) {
      //         state.taskForm.periodClassifyStart = state.taskForm.periodClassifyStart.slice(2)
      //     }
      //     if (state.taskForm?.periodClassifyEnd.indexOf('+') !== -1) {
      //         state.taskForm.periodClassifyEnd = state.taskForm.periodClassifyEnd.slice(2)
      //     }
      //     getStageList(
      //         getStatusPrefix(state.treeProps.selectedKeys[0]),
      //         result => {
      //             getYlTask(getStatusPrefix(state.treeProps.selectedKeys[0]))
      //             state.modalTaskTitle = '编辑任务'
      //             state.taskVisible = true
      //             state.radioDisabled = true
      //         },
      //         state.taskType
      //     )
      // }
      const handleDeleteTask = taskId => {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          // 删除模板任务：DELETE
          del(`/solution-ppm/api/v2/built-in-system-ppm/project/template/task/${taskId}`).then(res => {
              if (res.status === 'fail') {
                  message.error(res.message)
                  return
              }
              message.success('删除成功')
              getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                  state.taskVisible = false
              })
          })
      }

      // 模板上线
      function handleOnline(templateId) {
          checkProjectExit(templateId, isExist => {
              if (!isExist) {
                  updateTemplateStatus('上线', templateId, () => {
                      getTemplateList()
                  })
              } else {
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '模版上线后将支持选择该模板创建项目，请确认',
                      onOk() {
                          state.templateStatusLoadingId = templateId
                          updateTemplateStatus('上线', templateId, res => {
                              state.templateStatusLoadingId = undefined
                              getTemplateList()
                          })
                      }
                  })
              }
          })
      }
      // 模板下线
      function handleOffline(templateId) {
          checkProjectExit(templateId, isExist => {
              if (!isExist) {
                  updateTemplateStatus('下线', templateId, () => {
                      getTemplateList()
                  })
              } else {
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '模板下线后新建项目将不再展示该模板，请确认',
                      onOk() {
                          state.templateStatusLoadingId = templateId
                          updateTemplateStatus('下线', templateId, res => {
                              state.templateStatusLoadingId = undefined
                              getTemplateList()
                          })
                      }
                  })
              }
          })
      }
      // 删除模板
      const handleDeleteTemplate = id => {
          if (id.includes('上线')) {
              message.info('请先下线该模板')
              return
          }
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/detail/${getStatusPrefix(id)}`).then(
              ({ data }) => {
                  if (data.approvalStatus && data.approvalStatus?.includes('审批中')) {
                      message.info('请通过审批再进行此操作')
                  } else {
                      checkProjectExit(getStatusPrefix(id), isExist => {
                          if (!isExist) {
                              //   删除
                              del(
                                  `/solution-ppm/api/v2/built-in-system-ppm/project/template/delete/${getStatusPrefix(
                                      id
                                  )}`
                              ).then(data => {
                                  if (data.code === 200) {
                                      message.success('操作成功')
                                      getTemplateList()
                                  } else {
                                      message.error(data.message)
                                  }
                              })
                          } else {
                              message.info('该模板已关联项目不允许删除')
                          }
                      })
                  }
              }
          )
      }

      // const formatStringBySemi = string => {
      //     return string.split(/;|；|\n|\r\n/)
      // }
      const formatStringBySemi = string => {
          if (!string) {
              return
          }
          return string.split(/[\r\n；;]+/) // 同时匹配换行符（\n 或 \r\n）和中英文分号（；;）
      }

      onMounted(() => {
          getTemplateList()
      })

      // 获取模板列表
      function getTemplateList() {
          post('/solution-ppm/api/v2/built-in-system-ppm/project/template/list', {
              templateName: state.templateName
          }).then(res => {
              res.data.forEach(item => {
                  item.templateId = `${item.templateId}status${item.status}`
              })
              state.templateList = res.data
          })
      }
      // 取id
      function getStatusPrefix(str) {
          str = str.toString()
          const regex = /(\d+)status/i // 匹配status前面的数字
          const match = str.match(regex)
          if (match && match[1]) {
              return parseInt(match[1].trim(), 10) // 返回匹配到的数字并转换为整数
          } else {
              return null // 如果未匹配到，返回null或者其他你认为合适的默认值
          }
      }

      // 查询模板是否被项目中使用
      function checkProjectExit(id, callback) {
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/project_used`).then(({ data }) => {
              callback(data)
          })
      }

      // 查询项目阶段下是否包含任务
      function checkTaskExist(id, callback) {
          console.log(id)
          if (!id) {
              // 新建
              callback(false)
              return
          }
          get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/stage/${id}/task_exist`).then(({ data }) => {
              callback(data)
          })
      }

      // 模板状态更新
      function updateTemplateStatus(status, id, callback) {
          put(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/status`, {
              status: status,
              forceFlag: true
          }).then(res => {
              callback(res)
              if (res.status === 'fail') {
                  message.error(res.message)
                  return
              }
              message.success(status + '成功')
          })
      }

      // 项目阶段更新
      function updateStageList(id, params, callback) {
          post(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/stage/latest`, {
              dataList: params,
              versionId: currentTreeDate.value.versionId,
              stageType: state.taskType
          })
              .then(res => {
                  if (res.status === 'fail') {
                      message.error(res.message)
                      return
                  }
                  callback()
              })
              .finally(() => {
                  state.milepostLoading = false
              })
      }
      const ylTaskData = ref([])
      // 查询模板下的任务
      function getTaskList(id, callback) {
          state.tableLoading = true
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/detail_list?taskType=${
                  state.taskType ? state.taskType : ''
              }`
          )
              .then(res => {
                  if (state.templateType === '交付项目') {
                      state.templateDetailList = groupData(res.data)
                  } else {
                      state.templateDetailList = groupPtData(res.data)
                  }
                  callback && callback()
              })
              .finally(() => {
                  state.tableLoading = false
                  state.milepostLoading = false
              })
      }
      function getYlTask(id, callback, templateTaskId) {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/task_tree?templateTaskId=${
                  templateTaskId ? templateTaskId : ''
              }&versionId=${currentTreeDate.value.versionId}`
          ).then(data => {
              ylTaskData.value = formatData(data.data)
              if (state.taskForm.templateTaskId) {
                  let tree = cloneDeep(formatData(data.data))
                  ylTaskData.value = removeTaskById(tree, state.taskForm.templateTaskId)
              }
          })
      }
      function removeTaskById(tasks, taskIdToRemove) {
          return tasks.reduce((result, task) => {
              if (task.taskId !== taskIdToRemove) {
                  if (task.children && task.children.length > 0) {
                      task.children = removeTaskById(task.children, taskIdToRemove)
                  }
                  result.push(task)
              }
              return result
          }, [])
      }
      function generateUniqueId(idCounter) {
          return `node-${idCounter++}`
      }
      function formatData(list) {
          let result = list.map(item => {
              return {
                  taskId: generateUniqueId(item.taskId),
                  taskName: item.taskName,
                  disabled: item.disabled,
                  children: item.children
              }
          })
          return result
      }
      function removeParentTaskId(tasks) {
          return tasks.map(task => {
              // 创建一个新的对象，避免直接修改原始数据
              let newTask = {
                  taskName: task.taskName,
                  disabled: task.disabled,
                  children: []
              }
              // 如果有子任务，则递归处理子任务
              if (task.children && task.children.length > 0) {
                  newTask.children = removeParentTaskId(task.children)
              }
              return newTask
          })
      }

      function groupPtData(data) {
          let stageName = ''
          if (!data || !data.length) {
              return []
          }
          return data.map((item, index) => {
              if (stageName !== item.stageName) {
                  stageName = item.stageName
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (stageName === data[i].stageName) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
                  item.border = index
              } else {
                  item.rowSpan = 0
              }
              item.rowIndex = index
              return item
          })
      }

      function groupData(data) {
          const result = []
          let lastStageClassify = null
          let lastStageName = null
          let classifyCount = 0
          let nameCount = 0
          let classifyStart = 0
          let nameStart = 0

          data.forEach((item, index) => {
              const newItem = { ...item, rowIndex: index }

              // 处理 stageClassify 合并
              if (item.stageClassify !== lastStageClassify) {
                  if (classifyCount > 0) {
                      result[classifyStart].rowSpan_stageClassify = classifyCount
                  }
                  classifyCount = 1
                  classifyStart = index
                  lastStageClassify = item.stageClassify
                  newItem.isFirst_stageClassify = true
              } else {
                  classifyCount++
                  newItem.rowSpan_stageClassify = 0
              }

              // 处理 stageName 合并
              if (item.stageName !== lastStageName) {
                  if (nameCount > 0) {
                      result[nameStart].rowSpan_stageName = nameCount
                  }
                  nameCount = 1
                  nameStart = index
                  lastStageName = item.stageName
                  newItem.isFirst_stageName = true
              } else {
                  nameCount++
                  newItem.rowSpan_stageName = 0
              }

              result.push(newItem)
          })

          // 补最后一组
          if (classifyCount > 0) {
              result[classifyStart].rowSpan_stageClassify = classifyCount
          }
          if (nameCount > 0) {
              result[nameStart].rowSpan_stageName = nameCount
          }

          return result
      }
      // 删除阶段
      const handleDeleteStage = (index, item) => {
          if (state.templateStageList.length <= 1) {
              return
          }
          checkTaskExist(item.templateStageId, result => {
              if (result) {
                  state.projectStageVisible = false
                  Modal.confirm({
                      title: '提示',
                      centered: true,
                      content: '该阶段下包含任务，是否确认删除',
                      onOk() {
                          state.templateStageList.splice(index, 1)
                          state.projectStageVisible = true
                      },
                      onCancel() {
                          state.projectStageVisible = true
                      }
                  })
                  return
              }
              state.templateStageList.splice(index, 1)
          })
      }
      // 查询模板下的项目阶段
      function getStageList(id, callback, type) {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${id}/stage/list?stageType=${type}&versionId=${
                  currentTreeDate.value.versionId || ''
              }`
          ).then(res => {
              state.templateStageList = res.data.map(item => {
                  return {
                      ...item,
                      isShow: true,
                      projectTemplateStageRoleWeightList:
                          item.projectTemplateStageRoleWeightList.length == 0
                              ? []
                              : item.projectTemplateStageRoleWeightList
                  }
              })
              callback && callback()
          })
      }

      // 创建任务

      function handleCreateTask(id, callback) {
          if (!state.treeProps.selectedKeys.length) {
              return
          }
          loadingState.taskLoading = true
          post(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}/task`,
              { ...state.taskForm, versionId: currentTreeDate.value.versionId }
          )
              .then(res => {
                  if (res.code !== 200) {
                      message.error(res.message)
                      return
                  }
                  state.taskVisible = false
                  getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                      state.taskVisible = false
                      message.success('创建成功')
                  })
              })
              .finally(() => {
                  loadingState.taskLoading = false
              })
      }

      function $guid(prefix) {
          function s4() {
              const baseNumber = 0x10000
              const radix = 16
              return Math.floor((1 + Math.random()) * baseNumber)
                  .toString(radix)
                  .substring(1)
          }

          return `${prefix ? `${prefix}-` : ''}${s4()}${s4()}-${s4()}`
      }

      // 修改模板任务
      function handleUpdateTask(id, callback) {
          if (!state.treeProps.selectedKeys.length) {
              return
          }
          loadingState.taskLoading = true
          put(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/task/${state.taskForm.templateTaskId}`,
              state.taskForm
          )
              .then(res => {
                  if (res.code !== 200) {
                      message.error(res.message)
                      return
                  }
                  message.success('更新成功')
                  getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]), () => {
                      state.taskVisible = false
                  })
              })
              .finally(() => {
                  loadingState.taskLoading = false
              })
      }

      function downloadFile(info) {
          const { name, url } = info
          let xhr = new XMLHttpRequest()
          xhr.open('GET', url, true)
          xhr.responseType = 'blob'
          xhr.onload = function () {
              if (xhr.status === 200) {
                  if (window.navigator.msSaveOrOpenBlob) {
                      navigator.msSaveBlob(xhr.response, name)
                  } else {
                      let link = document.createElement('a')
                      let body = document.querySelector('body')
                      link.href = window.URL.createObjectURL(xhr.response)
                      link.download = name
                      // fix Firefox
                      link.style.display = 'none'
                      body.appendChild(link)
                      link.click()
                      body.removeChild(link)
                      window.URL.revokeObjectURL(link.href)
                  }
              }
          }
          xhr.send()
      }

      // 角色管理
      const leaderRef = ref(null)
      const responsibleRef = ref(null)
      const memberRef = ref(null)
      function handleChangeRole() {
          get('/solution-ppm/api/v2/built-in-system-ppm/project/template/role/info').then(data => {
              if (data.code === 200) {
                  state.memberModel = data.data.coreRoleManagementList
                  state.responsibleModel = data.data.headRoleManagementList
                  state.leaderModel = data.data.leaderRoleManagementList
                  state.roleVisible = true
              } else {
                  mseeage.error(data.message)
              }
          })
      }

      function handleSubmitRole() {
          const params = {
              leaderRoleManagementList: state.leaderModel,
              headRoleManagementList: state.responsibleModel,
              coreRoleManagementList: state.memberModel
          }
          Promise.all([leaderRef.value.validate(), responsibleRef.value.validate(), memberRef.value.validate()])
              .then(() => {
                  loadingState.roleLoading = true
                  put('/solution-ppm/api/v2/built-in-system-ppm/project/template/role', params)
                      .then(data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              state.roleVisible = false
                          } else {
                              message.error(data.message || '修改角色失败')
                          }
                      })
                      .finally(() => {
                          loadingState.roleLoading = false
                      })
              })
              .catch(() => {
                  message.error('请检查录入信息')
              })
      }
      const handleAddLeader = () => {
          state.leaderModel.push({
              roleName: undefined,
              serialNumber: undefined,
              roleType: 'LEADER'
          })
      }
      const deleteLeader = (index, item) => {
          state.leaderModel.splice(index, 1)
      }
      const handleAddResponsible = () => {
          state.responsibleModel.push({
              roleName: undefined,
              serialNumber: undefined,
              roleType: 'HEAD'
          })
      }
      const deleteResponsible = (index, item) => {
          state.responsibleModel.splice(index, 1)
      }
      const handleAddMember = () => {
          state.memberModel.push({
              roleName: undefined,
              serialNumber: undefined,
              roleType: 'CORE'
          })
      }
      const deleteMember = (index, item) => {
          state.memberModel.splice(index, 1)
      }
      const directorRoleList = ref([])

      function getRolePeople() {
          get('/solution-ppm/api/v2/built-in-system-ppm/project/template/role/list').then(data => {
              directorRoleList.value = data.data.map(item => {
                  return {
                      label: item.roleName,
                      value: item.roleName
                  }
              })
          })
      }
      // 项目核心成员排序校验
      const validateSerial = (rule, value) => {
          return new Promise((resolve, reject) => {
              const reg = new RegExp(/^[1-9]\d*$/)
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNumberExists(state.memberModel, value)
                  if (exists) {
                      reject('排序重复')
                  } else if (!reg.test(value)) {
                      reject('请输入1000以内的正整数数字')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入1000以内的正整数数字')
              }
          })
      }

      // 领导小组排序校验
      const validateLeader = (rule, value) => {
          return new Promise((resolve, reject) => {
              const reg = new RegExp(/^[1-9]\d*$/)
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNumberExists(state.leaderModel, value)
                  if (exists) {
                      reject('排序重复')
                  } else if (!reg.test(value)) {
                      reject('请输入1000以内的正整数数字')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入1000以内的正整数数字')
              }
          })
      }

      // 项目负责人排序校验
      const validateResponsible = (rule, value) => {
          return new Promise((resolve, reject) => {
              const reg = new RegExp(/^[1-9]\d*$/)
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNumberExists(state.responsibleModel, value)
                  if (exists) {
                      reject('排序重复')
                  } else if (!reg.test(value)) {
                      reject('请输入1000以内的正整数数字')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入1000以内的正整数数字')
              }
          })
      }

      function checkSerialNumberExists(array, serialNumberToCheck) {
          let count = 0 // 计数器，用于计算具有相同 serialNumber 的项的数量

          for (let i = 0; i < array.length; i++) {
              if (array[i].serialNumber === serialNumberToCheck) {
                  count++ // 每当找到一个具有相同 serialNumber 的项，计数器加一
                  if (count > 1) {
                      return true // 如果数量大于1，表示有重复，返回true
                  }
              }
          }
          return false // 如果数量不大于1，表示没有重复，返回false
      }

      // 项目核心成员排序校验
      const validateSerialName = (rule, value) => {
          return new Promise((resolve, reject) => {
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNameExists(value)
                  if (exists) {
                      reject('角色名称重复')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入角色名称')
              }
          })
      }

      // 领导小组排序校验
      const validateLeaderName = (rule, value) => {
          return new Promise((resolve, reject) => {
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNameExists(value)
                  if (exists) {
                      reject('角色名称重复')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入角色名称')
              }
          })
      }

      // 项目负责人排序校验
      const validateResponsibleName = (rule, value) => {
          return new Promise((resolve, reject) => {
              if (value !== undefined && value !== null) {
                  const exists = checkSerialNameExists(value)
                  if (exists) {
                      reject('角色名称重复')
                  } else {
                      resolve()
                  }
              } else {
                  reject('请输入角色名称')
              }
          })
      }

      function checkSerialNameExists(roleName) {
          let array = [...state.leaderModel, ...state.responsibleModel, ...state.memberModel]
          let count = 0 // 计数器，用于计算具有相同 serialNumber 的项的数量
          for (let i = 0; i < array.length; i++) {
              if (array[i].roleName.toString() === roleName) {
                  count++ // 每当找到一个具有相同 serialNumber 的项，计数器加一
                  if (count > 1) {
                      return true // 如果数量大于1，表示有重复，返回true
                  }
              }
          }
          return false // 如果数量不大于1，表示没有重复，返回false
      }

      // 父上传文件
      function handlerUpload(file) {
          const data = new FormData()
          data.append('file', file)

          post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  if (data) {
                      // 新文件对象
                      const newFile = {
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: 'done',
                          url: fullUrl
                      }

                      // 去重，保留一个副本
                      state.taskForm.attachmentList = [
                          // 保留已存在文件（去除重复）
                          ...state.taskForm.attachmentList.filter(
                              item => item.uid !== file.uid && item.name !== file.name
                          ),
                          // 添加新的文件
                          newFile
                      ]
                  }
              })
              .catch(e => {
                  message.error('上传失败' + e)
              })

          return false
      }
      // 父移除文件
      function handlerRemove(file) {
          state.taskForm.attachmentList = state.taskForm.attachmentList.filter(item => item.uid !== file.uid)
      }
      import { nextTick } from 'vue'
      // 父上传文件
      function handleExpend(index, item) {
          item.isShow = !item.isShow
          nextTick(() => {})
      }
      //     版本管理
      const versionState = reactive({
          changeVersionVisible: false,
          submitVersionVisible: false,
          changeVersionDataSource: [],
          changeLoading: false,
          submitLoading: false,
          submitForm: {
              versionCode: undefined,
              currentVersionId: undefined,
              templateId: undefined,
              versionDesc: undefined
          }
      })
      function showChangeVersion() {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/version/search/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}`
          ).then(data => {
              if (data.code !== 200) {
                  versionState.changeVersionDataSource = []
              }
              versionState.changeVersionDataSource = data.data
              versionState.changeVersionVisible = true
          })
      }
      function showSubmitVersion() {
          versionState.submitForm.currentVersionId = currentTreeDate.value.versionId
          versionState.submitForm.templateId = getStatusPrefix(state.treeProps.selectedKeys[0])
          versionState.submitVersionVisible = true
      }
      const versionRules = {
          versionCode: [
              { required: true, message: '版本号不能为空', trigger: 'blur' },
              {
                  pattern: /^\d{1,3}(\.\d{1,3}){0,2}$/,
                  message: '版本号支持最多三组数字两个小数点，每组数字最多支持三个数字。例：123.123.123',
                  trigger: 'blur'
              }
          ],
          versionDesc: [{ required: true, message: '版本介绍', trigger: 'blur' }]
      }
      // function confirmChangeVersion(record) {
      //     currentVersionCode.value = record.versionCode
      //     getVersionId(getStatusPrefix(selectKeys[0]))
      //     getTaskList(getStatusPrefix(selectKeys[0]))
      //     getTemplateDetail(getStatusPrefix(selectKeys[0]))
      // }
      async function confirmChangeVersion(record) {
          currentVersionCode.value = record.id

          try {
              // await getVersionId(getStatusPrefix(state.treeProps.selectedKeys[0]), record.id) // 等待 getVersionId 完成

              const statusPrefix = getStatusPrefix(state.treeProps.selectedKeys[0])
              await getTaskList(statusPrefix)
              await getTemplateDetail(statusPrefix)
              message.success('操作成功')
              versionState.changeVersionVisible = false
          } catch (error) {
              console.error('Error in confirmChangeVersion:', error)
          }
      }

      function cancelChangeVersion() {
          versionState.changeVersionVisible = false
      }
      const submitVersionRef = ref(null)
      function confirmVersion() {
          submitVersionRef.value.validate().then(() => {
              post(
                  '/solution-ppm/api/v2/built-in-system-ppm/project/template/version/create',
                  versionState.submitForm
              ).then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  message.success(data.message)
                  cancelVersion()
                  getTemplateList()
              })
          })
      }
      function cancelVersion() {
          versionState.submitForm = {
              versionCode: undefined,
              currentVersionId: undefined,
              templateId: undefined,
              versionDesc: undefined
          }
          versionState.submitVersionVisible = false
      }

      const versionColumns = ref([
          {
              title: '版本号',
              dataIndex: 'versionCode',
              align: 'center',
              ellipsis: true
          },
          {
              title: '版本介绍',
              dataIndex: 'versionDesc',
              align: 'center',
              ellipsis: true
          },
          {
              title: '创建人',
              dataIndex: 'createBy',
              align: 'center',
              ellipsis: true
          },
          {
              title: '创建时间',
              dataIndex: 'createTime',
              align: 'center',
              ellipsis: true
          },
          {
              title: '操作',
              dataIndex: 'opration',
              align: 'center',
              ellipsis: true
          }
      ])
      const handleAddStage = () => {
          state.templateStageList.push({
              stageName: undefined,
              isShow: true,
              serialNumber: undefined,
              goals: undefined,
              crutialPath: undefined,
              firstPartyMainRole: undefined,
              firstPartyRespAndCoopMatters: undefined,
              stageWeight: undefined,
              projectTemplateStageRoleWeightList: [],
              taskStatusList: [],
              uid: $guid()
          })
      }
      // 新建阶段下的角色
      const handleAddStageJdRule = index => {
          state.templateStageList[index].projectTemplateStageRoleWeightList?.push({
              role: undefined,
              roleWeight: 0
          })
      }
      // 删除阶段下的角色
      // 删除阶段
      const handleDeleteStageJdRule = (index, roleIndex) => {
          // if (state.templateStageList[index].projectTemplateStageRoleWeightList?.length <= 1) {
          //     return
          // }
          state.templateStageList[index].projectTemplateStageRoleWeightList?.splice(roleIndex, 1)
      }
      // 新建状态
      const handleAddStageStatus = index => {
          state.templateStageList[index].taskStatusList?.push({
              status: undefined
          })
      }
      // 删除状态
      const handleDeleteStageStatus = (index, roleIndex) => {
          state.templateStageList[index].taskStatusList?.splice(roleIndex, 1)
      }
      // 打开项目阶段维护
      const handleOpenStageModal = () => {
          if (!state.treeProps.selectedKeys.length) {
              message.info('请先选择模板')
              return
          }
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          getStageList(
              getStatusPrefix(state.treeProps.selectedKeys[0]),
              result => {
                  if (!state.templateStageList.length) {
                      state.templateStageList = [
                          {
                              stageName: undefined,
                              serialNumber: undefined,
                              templateStageId: undefined,
                              isShow: true,
                              projectTemplateStageRoleWeightList: [],
                              taskStatusList: [],
                              uid: $guid()
                          }
                      ]
                  } else {
                      state.templateStageList = state.templateStageList.map(item => ({
                          ...item,
                          isShow: false,
                          uid: $guid(),
                          taskStatusList: item.taskStatusList ? item.taskStatusList : [{ status: undefined }]
                      }))
                  }
                  state.projectStageVisible = true
                  if (state.templateType === '平台项目') {
                      // 只校验任务状态，移除其他校验规则
                      delete state.stageRules.stageWeight
                      delete state.stageRules.role
                      delete state.stageRules.roleWeight
                  } else {
                      state.stageRules.stageWeight = [{ required: false, validator: validateQzCode, trigger: 'blur' }]
                      state.stageRules.role = [{ required: true, validator: validateJsjs, trigger: 'blur' }]
                      state.stageRules.roleWeight = [{ required: true, validator: validateJsqz, trigger: 'blur' }]
                  }
                  getBelong()
              },
              state.taskType
          )
      }
      //     新项目阶段
      const jfState = reactive({
          visible: false,
          title: '项目阶段维护',
          dataList: [],
          belongList: []
      })
      function handleOpenJfStage() {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '上线') {
              message.info('请先下线该模板再继续操作')
              return
          }
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}/milepost_stage/list?stageType=${state.taskType}&versionId=${currentTreeDate.value.versionId || ''}`
          ).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              jfState.visible = true
              jfState.title = `${state.templateType}--项目阶段维护`
              jfState.dataList = data.data || [
                  {
                      stageClassify: undefined,
                      stageClassifyNo: undefined,
                      uid: $guid()
                  }
              ]
          })
      }
      const jfItem = {
          stageName: undefined,
          serialNumber: undefined,
          uid: $guid()
      }
      function handleAddJfItem() {
          jfState.dataList.push({ ...jfItem })
      }
      function handleDeleteJfItem(index) {
          jfState.dataList.splice(index, 1)
      }
      const jfFormRef = ref(null)
      function handleSubmitJf() {
          jfFormRef.value.validate().then(() => {
              loadingState.outMileLoading = true
              post(
                  `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                      state.treeProps.selectedKeys[0]
                  )}/milepost_stage/latest/v2`,
                  {
                      'stageType': state.taskType,
                      'versionId': currentTreeDate.value.versionId || '',
                      dataList: jfState.dataList
                  }
              )
                  .then(data => {
                      if (data.code !== 200) {
                          message.error(data.message)
                          return
                      }
                      jfState.visible = false
                      message.success(data.message)
                      getTaskList(getStatusPrefix(state.treeProps.selectedKeys[0]))
                  })
                  .finally(() => {
                      loadingState.outMileLoading = false
                  })
          })
      }
      function handleCancelJf() {
          jfState.visible = false
      }
      function getBelong() {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}/milepost_stage/list?stageType=${state.taskType}&versionId=${currentTreeDate.value.versionId || ''}`
          ).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              jfState.belongList = data.data.map(item => {
                  return {
                      label: item.stageName,
                      value: item.templateStageId
                  }
              })
          })
      }
      const headerOffset = ref(150)
      const calcTableHeight = () => {
          state.tableHeight = window.innerHeight - 150 - headerOffset.value
      }

      onMounted(() => {
          calcTableHeight()
          window.addEventListener('resize', calcTableHeight)
      })

      onBeforeUnmount(() => {
          window.removeEventListener('resize', calcTableHeight)
      })
      //     模板下发
      const distributeState = reactive({
          typeRadio: '任务下发',
          selectVisible: false,
          title: '',
          step: 0,
          tableVisible: false,
          areaOrProjectRadio: '区域下发',
          taskColumns: [
              {
                  title: '里程碑阶段',
                  dataIndex: 'stageName',
                  align: 'left',
                  ellipsis: true,
                  customCell: item => {
                      const { rowSpan_stageName } = item
                      return {
                          rowSpan: rowSpan_stageName,
                          style: {
                              fontSize: '16px',
                              color: '#262626',
                              fontWeight: '600'
                          }
                      }
                  }
              },
              {
                  title: '任务名称',
                  dataIndex: 'taskName',
                  ellipsis: true,
                  align: 'center',
                  resizable: true
              }
          ],
          taskData: [],
          mileColumns: [
              {
                  title: '里程碑阶段',
                  dataIndex: 'stageName',
                  align: 'left',
                  ellipsis: true,
                  customCell: item => {
                      return {
                          style: {
                              fontSize: '16px',
                              color: '#262626',
                              fontWeight: '600'
                          }
                      }
                  }
              }
          ],
          mileData: [],
          taskRowSelection: {
              type: 'checkbox',
              checkStrictly: false,
              selectedRowKeys: [],
              onChange: selectedRowKeys => {
                  // 更新已选择的行
                  distributeState.taskRowSelection.selectedRowKeys = selectedRowKeys
              },
              onSelectAll: (selected, selectedRows, changeRows) => {
                  console.log(selected, selectedRows, changeRows)
              }
          },
          mileRowSelection: {
              type: 'checkbox',
              checkStrictly: false,
              selectedRowKeys: [],
              onChange: selectedRowKeys => {
                  // 更新已选择的行
                  distributeState.mileRowSelection.selectedRowKeys = selectedRowKeys
              },
              onSelectAll: (selected, selectedRows, changeRows) => {
                  console.log(selected, selectedRows, changeRows)
              }
          },
          treeSelectIdList: [],
          projectData: [],
          getTaskOrMileLoading: false,
          getProjectOrAreaLoading: false,
          submitLoading: false
      })
      function showSelectType() {
          const currentInfo = state.templateList.find(item => item.templateId === state.treeProps.selectedKeys[0])
          if (currentInfo.status === '下线') {
              message.info('请先上线该模板再继续操作')
              return
          }
          distributeState.selectVisible = true
          distributeState.title = `模板项目下发--${currentInfo.templateName}`
      }
      function nextStep() {
          if (distributeState.typeRadio === '任务下发') {
              distributeState.getTaskOrMileLoading = true
              let templateId = getStatusPrefix(state.treeProps.selectedKeys[0])
              get(
                  `/solution-ppm/api/v2/built-in-system-ppm/project/template/${templateId}/detail_list?taskType=${
                      state.taskType ? state.taskType : ''
                  }&containsDel=true`
              )
                  .then(res => {
                      if (res.code !== 200) {
                          message.error(res.message)
                          return
                      }
                      distributeState.taskData = groupData(res.data)
                      distributeState.taskRowSelection.selectedRowKeys = []
                      distributeState.step = 1
                      getAreaOrProject()
                  })
                  .finally(() => {
                      distributeState.getTaskOrMileLoading = false
                  })
          } else {
              distributeState.getTaskOrMileLoading = true
              let templateId = getStatusPrefix(state.treeProps.selectedKeys[0])
              get(
                  `/solution-ppm/api/v2/built-in-system-ppm/project/template/distribute/${templateId}/milepost_stage/list?stageType=${
                      state.taskType ? state.taskType : ''
                  }`
              )
                  .then(res => {
                      if (res.code !== 200) {
                          message.error(res.message)
                          return
                      }
                      distributeState.mileData = groupData(res.data)
                      distributeState.mileRowSelection.selectedRowKeys = []
                      distributeState.step = 1
                      getAreaOrProject()
                  })
                  .finally(() => {
                      distributeState.getTaskOrMileLoading = false
                  })
          }
      }
      // 获取任务/里程碑列表
      function getAreaOrProject() {
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/project/template/project_tree/${getStatusPrefix(
                  state.treeProps.selectedKeys[0]
              )}`
          )
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  distributeState.projectData = data.data
              })
              .finally(() => {
                  distributeState.getProjectOrAreaLoading = false
              })
      }
      function cancelDistribute() {
          distributeState.selectVisible = false
          distributeState.typeRadio = '任务下发'
          distributeState.taskData = []
          distributeState.mileData = []
          distributeState.taskRowSelection.selectedRowKeys = []
          distributeState.mileRowSelection.selectedRowKeys = []
          distributeState.treeSelectIdList = []
          distributeState.step = 0
      }
      function prevStep() {
          distributeState.step = 0
      }
      function backSelect() {
          distributeState.step = 1
      }
      // 确认提交
      function submitDistributeState() {
          if (
              distributeState.taskRowSelection.selectedRowKeys.length == 0 &&
              distributeState.mileRowSelection.selectedRowKeys.length == 0
          ) {
              message.info('请选择需要下发的数据')
              return
          }
          if (distributeState.treeSelectIdList.length == 0) {
              message.info('请选择需要下发的项目')
              return
          }
          let templateId = getStatusPrefix(state.treeProps.selectedKeys[0])
          distributeState.submitLoading = true
          if (distributeState.typeRadio === '任务下发') {
              post(`/solution-ppm/api/v2/built-in-system-ppm/project_template/distribute_task`, {
                  'templateId': templateId,
                  'templateTaskIdList': distributeState.taskRowSelection.selectedRowKeys,
                  'projectIdList': distributeState.treeSelectIdList
              })
                  .then(data => {
                      if (data.code !== 200) {
                          message.error({
                              content: data.message,
                              style: { whiteSpace: 'pre-line',maxHeight:'800px',overflowY:'auto' }, // 关键：保留换行符并自动换行
                              duration: 3
                          })
                          return
                      }
                      message.success(data.message)
                      cancelDistribute()
                      getTaskList(templateId)
                  })
                  .finally(() => {
                      distributeState.submitLoading = false
                  })
          } else {
              post(`/solution-ppm/api/v2/built-in-system-ppm/project/template/distribute/milepost_stage `, {
                  'templateId': templateId,
                  'milepostStageList': distributeState.mileRowSelection.selectedRowKeys,
                  'projectList': distributeState.treeSelectIdList
              })
                  .then(data => {
                      if (data.code !== 200) {
                          message.error({
                              content: data.message,
                            style: { whiteSpace: 'pre-line',maxHeight:'800px',overflowY:'auto' }, // 关键：保留换行符并自动换行
                              duration: 3
                          })
                          return
                      }
                      message.success(data.message)
                      cancelDistribute()
                      getTaskList(templateId)
                  })
                  .finally(() => {
                      distributeState.submitLoading = false
                  })
          }
      }
      const radioStyle = {
          display: 'flex',
          height: '60px',
          lineHeight: '30px'
      }
      function getProductLine() {
          get('/solution-ppm/api/v2/built-in-system-ppm/product_line/all').then(data => {
              if (data.code !== 200) {
                  state.productLineList = []
                  return
              }
              state.productLineList = data.data.map(item => {
                  return {
                      label: item.productLineName,
                      value: item.productLineCode
                  }
              })
          })
      }
      const loadingState = reactive({
          roleLoading: false,
          outMileLoading: false,
          taskLoading: false
      })
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }
  .vid_433oha7j2l{
      padding-top:24px;
      padding-right:24px;
      padding-bottom:24px;
      padding-left:24px;
      background-color:#EE0303
  }
  .vid_ze7avqw1jv{
      box-shadow:0px 0px 0px 0px
  }
  .vid_njwqjjf4oz{
      box-shadow:0px 0px 0px 0px
  }
  .vid_fagfhdyqal{
      box-shadow:0px 0px 0px 0px
  }
  .vid_mvx0qa8zez{
      box-shadow:0px 0px 0px 0px
  }

  /*样式*/
      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr {
          height: 40px;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #ffffff;
          border-bottom: 1px solid #3875ff;
          padding: 8px 16px;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr:not(:last-child)
          > th {
          border-bottom: 1px solid #d9d9d9;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
      }

      /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
          border-left: none;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th[colstart='0']:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-header
          table {
          border-top: 1px solid #d9d9d9;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          > .@{ant-prefix}-table-content
          > table {
          border-top: 1px solid #d9d9d9;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table-thead)
          > tr
          > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
              .@{ant-prefix}-table-row-expand-icon-cell
          ):not([colspan])::before {
          background: #d9d9d9;
          width: 1px;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-cell-scrollbar) {
          box-shadow: none;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr {
          height: 40px;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          border-bottom: 1px solid #ebebeb;
          padding: 0 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .cell-wrapper {
          padding: 0 16px;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-empty .@{ant-prefix}-table-tbody tr > td) {
          padding: 0;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn {
          padding: 0 30px 0 0;
      }

      .vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn:last-child {
          padding: 0;
      }

      .vid_a7g6eyj5wh :deep(.table-striped-odd) td {
          background-color: #ffffff;
      }

      .vid_a7g6eyj5wh :deep(.table-striped-even) td {
          background-color: #fafafa;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td {
          border-right: 1px solid #ebebeb;
      }

      .vid_a7g6eyj5wh
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td:first-child {
          border-left: 1px solid #ebebeb;
      }

      .vid_a7g6eyj5wh {
          width: 100%;
          height: 100%;
      }

      .left-article {
          height: 100%;
          display: block;
          background-color: rgba(255, 255, 255, 1);
          border-right-style: solid;
          border-right-width: 16px;
          border-right-color: #f5f6fa;
          padding: 13px 24px;
      }

      .left-article .search {
          margin-top: 8px;
          margin-bottom: 16px;
      }

      .right-article {
          background: #fff;
          height: 100%;
          padding: 21px;
          position: relative;
      }
      .right-article .text {
          padding-left: 8px;
          margin: auto 0;
          font-weight: 600;
          font-size: 16px;
          line-height: 16px;
          border-left-style: solid;
          border-left-width: 4px;
          border-left-color: #3875ff;
      }

      .right-article .table-wrapper {
          height: 725px;
      }

      .stage-wrapper {
          width: 100px;
          max-height: 100%;
          text-align: center;
          border: 1px solid #d9d9d9;
          border-radius: 4px 0 0 4px;
          min-height: 183px;
      }

      .stage-wrapper .header {
          width: 100%;
          font-size: 14px;
          color: #fff;
          background: #3875ff;
          height: 39px;
          line-height: 39px;
      }

      .stage-wrapper .list {
          width: 98px;
          font-size: 15px;
          color: #262626;
          font-weight: bold;
          height: calc(100% - 40px);
          overflow: auto;
      }

      .stage-wrapper .list span {
          cursor: pointer;
          display: block;
          margin: 16px 0;
      }

      .ellipsis {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: keep-all;
          overflow-wrap: break-word;
      }

      .download-text {
          color: #3875ff;
          cursor: pointer;
      }

      .task-form .title {
          padding-left: 8px;
          font-weight: 600;
          line-height: 16px;
          margin-bottom: 16px;
          border-left-style: solid;
          border-left-width: 4px;
          border-left-color: #3875ff;
          font-size: 16px;
          color: #262626;
      }

      .task-form .tips {
          font-size: 12px;
          color: #8c8c8c;
          letter-spacing: 0;
          margin-top: -15px;
      }

      .table-text {
          min-width: 70px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
      }

      .template-delete {
          margin-left: -25px;
          margin-top: 5px;
      }

      .container {
          width: 100%;
          height: 100%;
      }
      .svg-icon {
          display: none;
          position: relative;
          top: 3px;
          outline: none;
      }
      .tree-btns {
          display: flex;
          justify-content: space-around;
      }
      :deep(.ant3-tree-node-content-wrapper:hover) .svg-icon {
          display: inline-block;
      }

      /*角色管理*/
      .role-title {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          position: absolute;
          top: -4px;
          left: 8px;
      }
      .role-father {
          position: relative;
          height: 17px;
          border-left: 4px solid #3875ff;
          margin-bottom: 16px;
      }
      .addRowBtn {
          margin-bottom: 20px;
      }
      .role-btn-pic {
          position: relative;
          top: 3px;

          display: inline-block;
          height: 16px;
          width: 16px;
          background-image: url('@/assets/images/9ae8fa477d2b2552deff4df24ab1ad20.png');
          background-size: cover;
      }
      .addRowBtn-role {
          margin-bottom: 24px;
      }
      .addRowBtn-role-last {
          margin-bottom: 16px;
      }
      .role-div {
          margin-bottom: 10px;
          max-height: 170px;
          overflow-y: auto;
          overflow-x: hidden;
      }
      .main-role {
          height: 700px;
          overflow-y: auto;
          overflow-x: hidden;
      }
      /*角色管理*/
      .pt-template :deep(.ant3-form-item-label) {
          width: 110px;
      }
      .role-comm-icon {
          width: 16px;
          height: 16px;
          background-image: url('@/assets/images/c51d76f9a049b44773294fe65484a26f.png');
          background-size: cover;
          cursor: pointer;
      }
      .add-icon {
          width: 16px;
          height: 16px;
          background-image: url('@/assets/images/b45d5dabad63e4b1ef50d588a42ad2bb.png');
          background-size: cover;
          cursor: pointer;
      }
      .right-btn {
          display: flex;
          gap: 8px;
      }
      .right-tj {
          display: flex;
          gap: 24px;
          align-items: center;
      }
      .stage-div :deep(.ant3-form-item-label) {
          width: 150px;
      }
      .stage-item {
          margin-bottom: 24px;
      }
      .add-btn,
      .del {
          background-size: cover;
          width: 16px;
          height: 16px;
          cursor: pointer;
      }
      .add-btn {
          background-image: url('@/assets/images/1a7a9fcb3f031027f51bf6b9175231d1.png');
      }
      .del {
          background-image: url('@/assets/images/80c373960957a45c2b94645f214b46c0.png');
      }
      .role-list-div {
          padding-left: 8px;
          height: 16px;
          line-height: 16px;
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          border-left: 4px solid #3875ff;
          margin-bottom: 16px;
      }
      .bj-icon,
      .fb-icon,
      .xx-icon,
      .sc-icon {
          width: 16px;
          height: 16px;
          background-size: cover;
      }
      .bj-icon {
          background-image: url('@/assets/images/b4c7bd1b91df1472fb52afcf95fcce00.png');
      }
      .fb-icon {
          background-image: url('@/assets/images/18035feedfeacba4763895115827229f.png');
      }
      .xx-icon {
          background-image: url('@/assets/images/66978ce129161d4eda9d517a94f4ac86.png');
      }
      .sc-icon {
          background-image: url('@/assets/images/f375da107910b892eaa9833dbe4c47be.png');
      }
      /*版本管理*/
      .change-version-tip {
          display: flex;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 16px;
          align-items: center;
      }
      .version-modal-top-left {
          padding: 6px 16px;
          background: rgba(250, 173, 20, 0.1);
          font-size: 14px;
          color: #262626;
          font-weight: 400;
          height: 32px;
      }
      .version-table:deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 8px 16px;
          border-right: 1px solid #d9d9d9 !important;
          position: relative;
      }
      .version-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 4px;
          word-break: break-all;
      }
      .submit-version-form :deep(.ant3-form-item-label) {
          width: 100px;
      }
      .template-title-new {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .template-right {
          height: 32px;
      }
      .mb-icon,
      .status-icon,
      .version-icon {
          width: 16px;
          height: 16px;
          background-size: cover;
          margin-right: 4px;
      }
      .mb-icon {
          background-image: url('@/assets/images/31112c303f54c29e5165744705a4705a.png');
      }
      .status-icon {
          background-image: url('@/assets/images/f89a840c579feb3f330e96e7de02c1f8.png');
      }
      .version-icon {
          background-image: url('@/assets/images/d2b844c19f9bf01977c7d73fb7de1476.png');
      }
      .approve-type,
      .approve-status,
      .version-status {
          display: flex;
          align-items: center;
      }
      .status-form-title {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #262626;
          font-weight: 600;
      }
      .status-form {
          background: #f5f8ff;
          border: 1px solid rgba(56, 117, 255, 0.5);
          border-radius: 5px;
          padding: 12px 20px;
      }
      .status-form :deep(.ant3-form-item-label) {
          width: 130px;
      }
      .page_root {
          overflow: hidden;
      }
      /*版本管理*/
      /*新项目阶段维护*/
      .inner-btn {
          background: rgba(56, 117, 255, 0.09);
          border-radius: 4px;
          color: #3875ff;
          border: none;
      }
      .out-btn {
          background: rgba(56, 117, 255, 0.09);
          border: 1px solid #3875ff;
          border-radius: 4px;
          color: #3875ff;
      }
      .distribute-table-box :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 8px 16px;
          border-right: 1px solid #d9d9d9 !important;
          position: relative;
      }
      .distribute-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
          word-break: break-all;
      }
      /*新项目阶段维护*/
      .title-tip {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          text-align: justify;
          font-weight: 400;
          background: rgba(250, 100, 0, 0.1);
          border: 1px solid #fa6400;
          border-radius: 2px;
          padding: 6px 16px;
          margin-right: 8px;
          margin-bottom: 16px;
      }
</style>